JSFiddle - React, Tailwind, and code Playground

by A B Jones

CSS

#container {
  fill: red;
}

JavaScript

var container = d3.select('body')
  .append('svg')
  .attr('id', 'container')
  .attr('x', 100)
  .attr('y', 100)
  .attr('width', 500)
  .attr('height', 500);



var testData = [{
  label: 'test1'
}, {
  label: 'test2'
}, {
  label: 'test3'
}, {
  label: 'test4'
}, {
  label: 'test5'
}, {
  label: 'test6'
}, ]


var text = container.append('g').selectAll('text');

text.data(testData).enter()
  .append('text')
  .attr('x', function(d, i) {
    return (i + 1) * 100;
  })
  .attr('y', 100)
  .text(function(d, i) {
    return d.label;
  })
  .attr("transform",function(d,i){
  var thisX = (i + 1) * 100, thisY = 100 ;
  return "rotate(-90," + thisX + ","+ thisY+")";
  
  } )