javascript - d3.js遍历分层数据

Question

在 d3.js 中，如何在这种层次结构上使用 .data？

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)

基本上，我想创建一组节点，并为每个子属性附加分组在同一节点下的其他内容。

或者 .data 仅用于“串行”结构？如果是这样，应该如何处理像这样的分层数据？

我不是在看 d3 的布局特性，只是在看如何“迭代”树状层次结构。谢谢!

Answer 1

首先，您可能想在 svg 元素内创建一个组。如果这样做，您可以先创建主组，然后为每个元素创建子组，将 subProperties 属性绑定(bind)到该子组:

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

我写了一个jsfiddle用这里的代码。问候。