D3.js 获取已更改的数据选择

我的数据是一个数字数组

定期交换数字以随机化数组

每个数字都由条形图中的条形图表示

在每一步中，我都想突出显示通过运行一个简单的转换来交换的两个元素，该转换改变了它们的颜色和不透明度（闪烁效果）

现在，在交换之前，我复制数据集，然后，在设置更新选择的动画时，我通过将数字的值与相同位置的前一个数据集的值进行比较来检查数字是否移动了：如果不同，我更改颜色和不透明度

代码如下：

bars.transition()
        .attr("fill", function(d, i) { return d !== previous[i] ? "green" : "blue"; })
        .attr("opacity", function(d, i) { return d !== previous[i] ? 0.5 : 1; })
    .transition()
        .attr("x", getX)
    .transition()
        .attr("fill", "blue")
        .attr("opacity", 1);

“问题”是所有现有的酒吧都受到“影响”，而不仅仅是更新的酒吧

我有两个顾虑：

• 虽然这是不可见的（其他条“移动”到相同的位置，其填充“更改”为相同的颜色），但从性能角度来看，这并不理想，因为存在大量无用的处理（100条98%的标识操作）

• 此外，更改数据的特殊执行路径（通过条件语句）与“不做任何事情”路径交错，这显然不利于理解和维护

_

D3是否有“更改数据”的概念？

做同样的事情还有更多的D3方式吗？

_

---

提前感谢。

D3的方法是在其值上键入数据。也就是说，每个更改的条都将是一个“新”数据项，您可以使用

.enter（）

和

.exit（）

选项相应地处理它，这将使您能够直接访问已更改的内容

但是，这不允许您轻松地“移动”这些条——您需要删除一个条，然后在新位置附加另一个条，而不是更改一个条的位置。当然，你可以破解进入和退出选项，但这样做有失偏颇

相反，我会过滤选择，使其仅包含值已更改的条，然后对这些条进行操作。您只需调用

.filter（）

，其余代码可以保持不变

bars.filter(function(d, i) { return d !== previous[i]; })
    .transition()
    .attr("fill", "green")
    .attr("opacity", 0.5)
.transition()
    .attr("x", getX)
.transition()
    .attr("fill", "blue");
    .attr("opacity", 1);

---

谢谢你的回答，拉尔斯。数据已通过其值进行标识。filter函数不起作用，因为它不保留原始索引。但是select函数做了类似的事情：

bar.select（函数（d，i）{returnd！==previous[i]？this:null；}）

谢谢你的想法。如果24小时内没有其他输入，我将接受您的答案。：）啊，好吧，我不清楚你是否需要保留索引。但是，是的，在这种情况下，再选择一次才是正确的选择。我只是倾向于使用过滤器，因为它对我来说更直观。你不清楚是有充分的理由的：你不知道，它隐藏在

getX

：）我也更喜欢

filter

，因为我不习惯将

select

这样的函数用于两个不同的“目的”；

filter

的语义很清楚。