Question

我使用一些数据按时间绘制圆圈，更新过程很好，但退出不起作用，这是我的代码的一部分：

function update(data) {

        var tmp1 = group.selectAll('.circle').data(data)
        tmp1.enter().append('circle')
                .attr('cx', function(d) {coords = projection([d.long,d.lat]); return  coords[0]})
                .attr('cy', function(d) {coords = projection([d.long,d.lat]); return  coords[1]})
                .attr('r',  function(d) { return countScale(d.count)})
                .attr("stroke", function(d, i) { return color(d.name, i);}) 
                .attr("stroke-width", 2.3)
                .style('fill', function(d) { 
                        if (d.count == 0){ return 'white';}
                        if (d.count !== 0){ return color(d.name);}
                    });
                tmp1.exit().remove();
}

之后我使用setInterval更新我的数据，但退出不起作用，前一个圆圈仍然退出。

setInterval(function() { update(nextDay(data)) }, 10);

Answer 1

您的selectAll(".circle")正在通过班级名称“圈子”进行选择，但您正在追加circle个元素，而不是设置class属性以匹配您的选择器。因此，您的退出选择将始终为空，因为没有匹配的元素。

你的意思是selectAll("circle")（没有前导.）来选择元素名称吗？

（另外，您可能需要key function并阅读general update pattern。）

为什么exit（）在这里不起作用？

1 个答案: