关于一个"官员" D3包布局的示例

时间:2015-09-22 04:46:05

标签: d3.js

以下是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"!

我错过了什么吗?

由于

德里克

1 个答案:

答案 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"!

检查上面引用的相同文档页面,包布局创建的节点均具有xy属性。

通过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函数。