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仅用于＆＃34; serial＆＃34;结构？如果是这样，那么如何处理像这样的层次化数据呢？

我没有看到d3的布局功能，只是如何＆＃34;迭代＆＃34;在树状层次结构上。谢谢！

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。问候。

d3.js遍历分层数据

1 个答案: