JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<svg height='400' width='300'></svg>

CSS

svg {
  outline: 1px dashed silver;
}

JavaScript

var jsonData = [{
    'x': 50,
    'y': 30,
    'labels': ['mark', 'cooper', 'pooch']
  },
  {
    'x': 50,
    'y': 60,
    'labels': ['mary', 'kitty']
  }
];

var g = d3.select('svg')
  .selectAll('g')
  .data(jsonData)
  .enter()
  .append('g');


g.each(function(d) {
  for (var i = 0; i < d.labels.length; i++) {
    d3.select(this)
      .append('text')
      .attr('dx', (d) => d.x)
      .attr('dy', (d) => d.y + (i * 50))
      .style('text-anchor', 'middle')
      .style('dominant-baseline', 'central')
      .text((d) => d.labels[i]);
  }
});