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

这样，您可以为“enter”和“update”选项设置属性。这是你更新的Pen（我把setTimeout设置为1秒，只是为了让你在更改之前看到原来的3个圆圈）：http://codepen.io/anon/pen/vKxZxX

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

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

1 个答案: