d3.js：绑定数据和输入元素后属性设置不起作用

Question

我从一开始就在学习D3.js。但是，在我正在阅读的教程的Entering Element 部分中，我无法获得与文章中相同的结果。

svg.selectAll("circle")
    .data([32, 57, 112, 293])
  .enter().append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30; })
    .attr("r", function(d) { return Math.sqrt(d); });

绑定数据后，进入元素，再追加一个circle，属性设置只作用于追加的circle，而不是所有的圈子。

特此附上codepen。

这种行为是正常的还是我误解了什么？

Answer 1

是的，这是正常行为。这是您的问题：您在 SVG 中已经有 3 个圆圈。因此，当您绑定数据时，您的“输入”选择只有一个圆圈（第四个圆圈），并且所有属性都只为最后一个圆圈设置。

进入/更新/退出选择基于数据和元素之间的关系。当您绑定数据（数组中的 4 个数字）时，SVG 中已经有 3 个元素。因此，您有：

• 输入选择：数据不对应任何元素。在你的情况下，1 个圆圈。

• 更新选择：与元素对应的数据。就你而言，是 3 个圆圈。

• 退出选择：元素不对应任何数据。在你的情况下，零圈。

要重绘所有 4 个圆圈（3 个以前的和一个新的），您必须执行以下操作：

var svg = d3.select("svg");

var myCircles = svg.selectAll('circle')
    .data([32, 57, 112, 293]);//binds the data

myCircles.enter().append("circle");//enter selection

myCircles.attr("cy", 60)
    .attr("cx", function (d, i) {
      return i * 100 + 30;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });//updates all circles

这样做，您为“输入”和“更新”选择设置了属性。这是你更新后的 Pen（我设置了 1 秒的 setTimeout，只是为了让你看到更改前的原始 3 个圆圈）：http://codepen.io/anon/pen/vKxZxX

请注意，我没有将您的代码与 Bostock 的教程进行比较，或者说您做错了什么。我只是在解释为什么您的代码没有更新 4 个圆圈。