以下是D3包布局的官方示例:http://bl.ocks.org/mbostock/4063530 我有两部分我不明白: 1:
var node = svg.datum(root).selectAll(".node")
.data(pack.nodes)
//其中" pack.nodes"初始化?
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
//在哪里" d.x"和" d.y"从?它不在" flare.json"!
我错过了什么吗?
由于
德里克
答案 0 :(得分:1)
我建议您阅读pack layout documentation。为您解答具体问题...
" pack.nodes"初始化?
在链接示例中,包布局初始化如下:
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
根据文档pack.nodes是一个返回包布局节点的函数。
" d.x"和" d.y"从?它不在" flare.json"!
检查上面引用的相同文档页面,包布局创建的节点均具有x
和y
属性。
通过D3数据连接将包布局和JSON文件中的数据放在一起。这就是魔术发生的地方:
var node = svg.datum(root).selectAll(".node")
.data(pack.nodes)
这实际上使用data
函数的一个功能,而不是传递数据项数组,您可以提供一个函数。将使用从父节点继承的数据调用此函数。您可以在此处查看相关代码:
https://github.com/mbostock/d3/blob/master/src/selection/data.js#L98
在这种情况下,将使用nodes
数据调用包布局root
函数。