Question

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

当我跑步时

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);

我得到4分（对应于'datafiltered。'中的4对数据）。但点击按钮，我运行

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'的最后一个元素（在这一个中有五对）。所以，数据是不同的，第二个是按钮点击，但不知道为什么我只是添加了一个点！

Answer 1

这里的问题是你绑定的数据没有关键函数，所以D3使用索引 - 因此前四个（预先存在的）元素与新数据绑定，并添加单个第5个元素

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

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

Answer 2

调用.enter()方法的结果是 new 元素的集合。对原始元素使用原始选择。请参阅D3网站上的Enter and Exit。

// 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();

在D3中添加多个元素

2 个答案: