javascript - D3 : best way to add new nodes from scratch

Question

所以我试图理解 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); });

这基本上所做的(据我所知)是获取“link”类的所有元素(即什么都没有)，然后将“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() 似乎也是多余的。

有什么想法吗？

Answer 1

如果您使用空的 graph.links 应用此操作，然后执行 console.log(links)，您将在 chrome javascript 控制台上看到以下内容:

[Array[0], select: function, selectAll: function, attr: function, classed: function, style: function…]

所以，是的，您将有一个空数组，但是您已经拥有了所有函数，因此，当您之后添加数据时，您不必再次执行所有操作。这就是 d3 的聪明之处。