3

谁能解释为什么 selectAll + data + enter + append 最初可以正常工作，但是当我再次调用它时它只附加一个元素？

http://jsfiddle.net/scottieb/wQJen/

当我跑

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   .attr("cx", function(d) { return x(d.x)})
   .attr("cy", function(d) { return y(d.y)})
   .attr("fill", "red").attr("r", 15);

我得到四分（对应于'datafiltered'中的四对数据）。但是在按钮单击时，我运行

vis.selectAll("circle")
    .data(datafiltered2)
    .enter().append("svg:circle")
    .attr("cx", function(d) {
        return x(d.x)
    }).attr("cy", function(d) {
        return y(d.y)
    }).attr("fill", "black").attr("r", 5);

并且只添加“datafiltered2”的最后一个元素（这一对中的五对）。所以，数据是不同的，第二个发生在按钮单击时，但不知道为什么我只添加了一个点！

4

2 回答 2

2

这里的问题是您要绑定的数据没有关键功能，因此 D3 使用索引来代替 - 因此前四个（预先存在的）元素与新数据绑定，并添加了第 5 个元素。

有关关键功能的详细信息，请参阅最近的教程：http: //bost.ocks.org/mike/constancy/

可能您真的只想添加单个元素，但也更改现有元素以表示它们新绑定的数据，如：http: //jsfiddle.net/jsl6906/wQJen/2/

于 2012-05-27T04:13:38.200 回答
2

调用该.enter()方法的结果是一个新元素的集合。对现有元素使用原始选择。请参阅D3 站点上的进入和退出。

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();
于 2013-07-09T15:21:13.747 回答