d3.js traverse hierarchical data

Question

In d3.js, how do you use .data on this kind of hierarchy?

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

d3.select("body")
  .data(data)
  .append("g") //for the node (1 and 2)
  .???         //append a "sub"-g for the subProperties (A,B,C and D,E,F)

Basically, I would like to create a set of nodes, and for each sub property, append something else grouped under the same node.

Or is .data only used for "serial" structures? If so, how should hierarchichal data like this be treated?

I'm not looking the the layout-features of d3, just how to "iterate" over tree-like hierarchies. Thank you!

Answer 1

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.