Javascript 方法链接似乎破坏了d3代码。为什么？

这让我觉得自己特别愚蠢，但今天我在玩D3js（v4），我看到了一些关于方法链接行为的意外行为

一切按预期进行——太好了

下面是一个有效的代码示例：

function render (data) {

  const circles = svg.selectAll('circle').data(data);

  circles.enter().append('circle').attr("r", circleRadius)
    .attr("class", "vote")
    .attr("cx", function (d) { return d.x})
    .attr("cy", function (d) { return d.y});

  circles.exit().remove();
}

---

，我结束了

循环

链，开始了一个新的循环，一切都中断了

下面是问题代码的示例：

function render (data) {

  const circles = svg.selectAll('circle').data(data);

  circles.enter().append('circle').attr("r", circleRadius);

    circles
    .attr("class", "vote")
    .attr("cx", function (d) { return d.x})
    .attr("cy", function (d) { return d.y});

  circles.exit().remove();
}

我确信这是我所缺少的一些简单的东西，但我真的觉得我不理解这一点会让我对JavaScript的一些基本知识产生疑问

更重要的是，我甚至更加困惑，因为我一直在关注youtube上的一个示例教程。这里是一个截图，这是一个家伙的工作代码，做同样的事情，我正在做的打破链，但他的代码工作：这可以在

---

我到底错过了什么

你不应该觉得自己很笨——我想每个使用d3的人都会在某个时候这样做（我反复这么做）

发生的情况是，

enter（）

正在返回添加数据时所做的选择。在

enter（）

之后链接的所有内容都将在使用

enter（）

选择创建的附加圆上被调用。这就是为什么您的第一个示例有效

但是，当您断开链时，您现在正在对原始选择调用

attire（）

，这将不起作用。这相当于这样做：

const circles = svg.selectAll('circle').data(data)
.attr("cx", function (d) { return ( xScale(d.x) )})
.attr("cy", function (d) { return d.y});

要将它们分开，您需要进行新的选择：

d3.selectAll('circle')
.attr("cx", function (d) { return ( xScale(d.x) )})
.attr("cy", function (d) { return d.y});

这是一个很好的方法来分离需要更新的内容

---

p、 我认为youtube视频之所以有效是因为他使用的是老版本的D3。在新版本中，选择是不可变的。请参阅此处的第一部分：

非常感谢您向我解释这一点！我认为版本控制可能是其中的一部分，但不确定。