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属性绑定到此子组:

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代码.问候.