6

我准备了一个小小提琴来说明这里的问题

我在使用 d3 的退出函数从 dom 中删除元素时遇到问题。

假设我有一个包含 10 个元素的数组：

var data = [1 ,4, 5, 6, 24, 8, 12, 1, 1, 20]

我使用这些数据使用 d3 创建一个简单的水平条形图

d3.selectAll('rect') 
.data(data) 
.enter() 
.attr("class", "rectangle")
.attr("stroke", "black")
.attr("stroke-width","1px")
.attr("fill","none")
.attr("x", 0)
.attr("y", function(d, i) { return 25 * i; } )
.attr("width", function(d) { return 22 * d; } )
.attr("height", "20");

现在经过短暂的延迟，我想修剪我的数据集，所以我剩下的就是

var truncatedData = [4,5]

d3.selectAll('rect')
    .data(truncatedData )   
    .exit()
    .transition()
    .delay(3000)
    .remove();

数据已成功删除，但仍显示前两个元素 1,4 而不是 4,5。

如何从 dom 中删除除 [4,5] 之外的所有内容？

4

1 回答 1

20

默认情况下，d3 匹配.data()由索引而不是值给出的元素。也就是说，在第二次调用中给它一个双元素数组意味着保留第一次调用的前两个元素（索引 0 和 1）。

要在您的情况下解决此问题，请提供一个函数以将元素与第二次调用相匹配.data()，即

.data([5, 6], function(d) { return(d); })

在这里修复了 jsfiddle 。

于 2013-03-05T17:54:15.970 回答