Javascript D3：从头开始添加新节点的最佳方法

因此，我试图理解的例子，在和有几个问题

从示例中可以看出：

  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”类的所有元素（即nothing），然后添加从“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（）

似乎也是多余的

---

有什么想法吗？

如果你用空的

graph.links

应用它，然后执行

console.log（links）

，下面是你将在chrome javascript控制台上看到的内容：

[数组[0]，选择：函数，选择全部：函数，属性：函数， 分类：功能，样式：功能…]

---

因此，是的，您将有一个空数组，但是您已经有了所有的函数，这样，当您在之后添加数据时，您就不必再做任何事情。这就是d3的聪明之处。

如果您将它与空

graph.links一起应用，然后再执行
console.log（links）
，以下是您将在chrome javascript控制台上看到的内容：

[数组[0]，选择：函数，选择全部：函数，属性：函数，
分类：功能，样式：功能…]

因此，是的，您将有一个空数组，但是您已经有了所有的函数，这样，当您在之后添加数据时，您就不必再做任何事情了。这就是d3的智能化方式。
为了准确理解所做的事情，让我们从上到下浏览示例：

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
返回的选择之间的差异返回节点选择，在本例中，这些节点是所有节点，因为没有预先存在的节点。然后，这些节点将被显示在通过使用
append
将其添加到svg元素

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

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

在这种情况下，
追加
（因为它位于
选择
之后）via.这假设返回的节点是。因为Sizzle引擎返回类似数组的对象中的所有选择，它的行为类似于数组，但d3假设它是一个只有一个节点元素的数组。这就是为什么在通过
data
和
append
释放
selectAll
和
enter
语句时。如果您试图通过将
enter
重新添加到语句中来更改此设置，则您运气不佳：
enter
尝试进行包含由
数据定义的所有节点的选择，这些节点在先前存在的选择中不存在。因为它假定先前存在的选择是一个节点数组

另一方面，
selectAll
。因为没有预先存在的节点，但最好将它放在那里，因为它显示了相应地更新所有链接和节点的意图。如果以后添加预先存在的节点，则很容易出现错误。
为了准确理解所做的工作，让我们从顶部开始了解示例至下：

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
返回的选择之间的差异返回节点选择，在本例中，这些节点是所有节点，因为没有预先存在的节点。然后，这些节点将被显示在通过使用
append
将其添加到svg元素

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

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

在这种情况下，
追加
（因为它位于
选择
之后）via.这假设返回的节点是。因为Sizzle引擎返回类似数组的对象中的所有选择，它的行为类似于数组，但d3假设它是一个只有一个节点元素的数组。这就是为什么在通过
data
和
append
释放
selectAll
和
enter
语句时。如果您试图通过将
enter
重新添加到语句中来更改此设置，则您运气不佳：
enter
尝试进行包含由
数据定义的所有节点的选择，这些节点在先前存在的选择中不存在。因为它假定先前存在的选择是一个节点数组

另一方面，
selectAll
，因为没有预先存在的节点，但最好将它放在那里，因为它显示了相应地更新所有链接和节点的意图。如果以后添加预先存在的节点，则很容易出现错误