1

因此，我试图了解http://bl.ocks.org/mbostock/4062045上的示例并有几个问题。

从例子：

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

基本上所做的（据我所知）是获取“链接”类的所有元素（即没有），然后将“graphs.links”中的所有内容添加到那个空的元素列表中。所有新元素（如“enter()”所示）都被“line”标签封装，具有“class”属性集并被风格化。

我的问题是......如果你知道 selectAll() 不会得到任何东西，为什么要这样做？为什么不这样做？：

  var link = svg
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

我想不这样做的一个原因是它似乎不起作用，哈哈，但为什么不呢？

当然，enter()如果你假设一切都是新的，这似乎也是多余的。

有任何想法吗？

4

2 回答 2

1

如果你用 empty 应用这个graph.links然后做console.log(links)，这就是你在 chrome javascript 控制台上得到的：

[Array[0]，select：函数，selectAll：函数，attr：函数，classed：函数，样式：函数…]

所以，是的，你将有一个空数组，但是你已经拥有了所有的函数，所以当你之后添加数据时，你不必再做所有的事情。这就是d3的聪明之处。

于 2013-04-10T07:14:18.453 回答
0

为了理解究竟做了什么，让我们从上到下遍历这个例子：

var link = svg.selectAll(".link")
  .data(graph.links)
.enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.value); });

selectAll执行以捕获任何预先存在的链接（与您正确假设的链接不同），并返回一个选择（为空）。然后通过 将数据分配给空选择data。enter然后根据 中假定的节点与返回的选择之间的差异返回节点data选择selectAll，在此示例中是所有节点，因为没有预先存在的节点。然后通过 using 将这些节点附加到 svg 元素append。

现在，selectAll必须使用的原因非常简单： svg 元素是使用append这里创建的：

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

append在这种情况下（因为它在 之后select）返回一个带有一个元素的 d3 选择数组via select。这假定返回的节点只是一个元素。因为 Sizzle 引擎返回类数组对象中的所有选择，所以它的行为就像一个数组，但 d3 假定它是一个只有一个节点元素的数组。这就是为什么当你解除selectAllandenter语句时，一个单个节点由dataand绘制append。如果您尝试通过重新附加enter到语句来更改它，那么您就不走运了：enter尝试使其选择包含由定义的所有节点data不存在于预先存在的选择中。因为它假定预先存在的选择是一个节点数组，所以它无法使用select.

selectAll另一方面，返回所需的节点数组。因为没有预先存在的节点，您也可以解除字符串选择器，但最好有它，因为它显示了相应更新所有链接和节点的意图。如果您稍后添加预先存在的节点，则很容易出现错误。

于 2013-04-10T08:22:30.367 回答