w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
d3.js traverse hierarchical data

First you probably want to create a group inside a svg element. If you do that, you can create the main group first, and for each element, create the subgroups, binding the subProperties attribute to this subgroups:

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);

I wrote a jsfiddle with the code here. Regards.





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.