d3.js:绑定数据并输入元素后，属性设置不起作用 [英] d3.js : attribute setting not working after binding data and entering elements

问题描述

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

I'm learning D3.js from the very beginning. However, in the Entering Element section of the tutorial I'm reading, I cannot get the result as the same as in the article.

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，而不是应用于所有圆.

After binding the data, entering the element and appending one more circle, the attributes setting only applied on the appended circle, not all the circles.

我特此附上 codepen .

这是正常现象还是我误会了?

Is this behaviour normal or do I misunderstand something?

推荐答案

是的，这是正常行为.这是您的问题:SVG中已经有3个圆圈.因此，当您绑定数据时，您的输入"选择只有一个圆圈(第四个圆圈)，并且所有属性都仅为此最后一个圆圈设置.

Yes, this is the normal behaviour. Here is your problem: you already have 3 circles in the SVG. So, when you bind the data, your "enter" selection has just one circle (the fourth one), and all the attributes are being set only for this last circle.

enter/update/exit选择基于数据和元素之间的关系.绑定数据(数组中的4个数字)时，SVG中已经包含3个元素.因此，您有:

The enter/update/exit selections are based on the relationship between data and elements. When you bind your data (the 4 numbers in the array), you already have 3 elements in the SVG. Thus, you have:

• 输入选择:不与任何元素对应的数据.在您的情况下，为1个圆圈.

• Enter selection: data not corresponding to any element. In your case, 1 circle.

更新选择:与元素相对应的数据.您的情况是3个圈子.

Update selection: data corresponding to an element. In your case, 3 circles.

退出选择:元素不对应任何数据.您的情况是零圈.

Exit selection: element not corresponding to any data. In your case, zero circles.

要重画所有4个圆圈(3个以前的圆圈和一个新的圆圈)，您必须执行以下操作:

To redraw all the 4 circles (3 previous and one new), you have to do something like this:

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

通过这种方式，可以同时设置输入"和更新"选择的属性.这是您更新的笔(我将setTimeout设置为1秒，只是为了让您看到更改前的原始3个圆圈):

Doing this way, you set the attributes both for the "enter" and the "update" selections. Here is your updated Pen (I put a setTimeout of 1 second, just for you to see the original 3 circles before the change): http://codepen.io/anon/pen/vKxZxX

请注意，我没有将您的代码与Bostock的教程进行比较，也不是说您做错了什么.我只是在解释为什么您的代码不能更新这四个圆圈.

Please note that I'm not comparing your code with Bostock's tutorial, or saying what you did "wrong". I'm simply explaining why your code doesn't update the 4 circles.

这篇关于d3.js:绑定数据并输入元素后，属性设置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！