Question

D3.js包布局的

One of Mike Bostock's relatively simple examples有一些让我感到困惑的功能。我无法弄清楚数据如何映射到其他元素。有人可以解释一下发生了什么吗？我会以编号问题的形式表达我的困惑，但许多问题都是密切相关的。（甚至可能只有一个简单的误解。）

示例，来自上面的链接：

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

// ... define the svg object here

d3.json("flare.json", function(error, root) {
  var node = svg.datum(root).selectAll(".node")
      .data(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 + ")"; });

评论：

首先请注意，在pack的定义中 - 包布局实例 - 没有附加数据。这在下面很重要。

在读取数据文件＆＃34; flare.json＆＃34;后，我们将文件中的数据（root）附加到svg对象：svg.datum(root)。 datum()做了什么？它＆＃34; sets the element's bound data to the specified value on all selected elements＆＃34; （没有进行连接 - 也就是说，如果被调用，enter()或exit()将不会返回任何内容，我猜。

但等一下。没有选择任何元素！ root会附加什么？或者我们是否说svg是一个具有单个元素的选择？ [问题1]

好的，现在我们selectAll＆＃34;节点的实例＆＃34;类。还没有，但那没关系;这是D3连接选择。在进行选择之前添加数据有点奇怪，但还可以。

接下来，我们使用data()：.data(pack.nodes)将数据添加到选择中。好的，这是正常模式：选择，然后添加数据。可是等等。 pack.nodes中的内容是什么？请记住，我们没有向pack提供任何数据。我们刚刚没有为空选择添加数据吗？ [问题2a]

或者我们添加了一个数据元素，即null中的pack.nodes（??）？ [问题2b]

除了null之外，我们在此品脱中发现的唯一数据是我们使用svg.datum()添加的数据。那是在这里发挥作用吗？怎么样？ [问题3]

下一行是.enter()调用，它通常出现在.data()之后，它为每个无法与现有SVG元素匹配的数据元素提供了SVG占位符。但据我所知，我们没有SVG元素，也没有数据元素。或者我们可能只有一个数据元素，即pack.nodes中的数据元素。所以.append("g")给了我们0或1 <g></g> s。那是对的吗？但是这个函数用来定义＆＃34; class＆＃34;的值。对于g元素似乎假设将有多个g。此时如何有多个g元素？ [问题4]

（感谢您阅读此内容！）

Answer 1

您的问题的简短回答是pack.nodes是function。使用root数据作为参数调用此函数。

Q1：svg是对单个<g>元素的选择。见代码：

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(2,2)");

Q2，Q3：data(pack.nodes)扩展如下：

nodes = pack.nodes(svg.datum()) //call the function with the attached data.
data(nodes)

这些行会附加一个nodes数组，对于每个行，.node元素都会被enter编辑。

问题4：我想现在应该回答这个问题。

如果目前还不清楚，请告诉我。

如何在基本包布局示例中附加数据？

1 个答案: