JSFiddle - React, Tailwind, and code Playground

by Pablo Navarro

HTML

<div id='chart'></div>

JavaScript

var svg = d3.select('#chart').append('svg')
   .attr('width', 100)
   .attr('height', 100);

var data = [
    {node : 1, subProperties : ["A", "B", "C"]},
    {node : 2, subProperties : ["D", "E", "F"]}
];

var mainGroups = svg.selectAll('g.main')
   .data(data)
   .enter()
   .append('g')
   .classed('main', true);

mainGroups.selectAll('g.sub')
   .data(function(d) { return d.subProperties; })
   .enter()
   .append('g')
   .classed('sub', true);