Javascript d3.js遍历分层数据
在d3.js中,如何在这种层次结构上使用.dataJavascript d3.js遍历分层数据,javascript,d3.js,hierarchical,Javascript,D3.js,Hierarchical,在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 sub
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)
基本上,我想创建一组节点,并为每个子属性添加在同一节点下分组的其他内容
数据是否仅用于“串行”结构?如果是这样,应该如何处理这样的层次数据
我不是在研究d3的布局特性,而是如何在树状层次结构上“迭代”。谢谢大家! 首先,您可能希望在svg元素中创建一个组。如果执行此操作,可以首先创建主组,然后为每个元素创建子组,并将Subperties属性绑定到此子组:
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);
我用这里的代码写了一篇文章。问候。您希望用于此目的。