如何在不使用 DOM 元素的情况下在 d3 中查找输入、退出的数据？答案

【问题标题】：How to find entered, exited data in d3 without using DOM elements?如何在不使用 DOM 元素的情况下在 d3 中查找输入、退出的数据？
【发布时间】：2014-03-27 14:34:02
【问题描述】：

假设我有两个数组

a1 = [1,2,3,4,5];
a2 = [1,3,4,5,6];

我想知道在这个数组中输入了哪个（6），退出了哪个（2）。

D3 有自己的函数enter()、exit()，但它们适用于 DOM。

我可以直接使用它而不附加、删除任何 HTML 元素吗？

【问题讨论】：

如何知道一个人是进入还是退出？

标签： javascript arrays d3.js

【解决方案1】：

.enter() 和 .exit() 函数对选择项进行操作，选择项是 DOM 元素的集合。为了使用它们，您必须选择元素，因此在不添加或删除 DOM 元素的情况下使用它们没有多大意义。

对于具有默认键功能的数据，如果 a1 是绑定到 DOM 元素的数据并且您将 a2 与它匹配（反之亦然）作为两个数组，则输入或退出选择中不会出现任何内容有相同的长度。默认情况下，D3 根据数组索引匹配数据。

【讨论】：

"默认情况下，D3 根据数组索引匹配数据。"但如果我使用selection.data(someData, function(d,i){return d})，它会匹配内容本身，所以这不是问题。
是的，在这种情况下，您为 D3 提供了一个关键函数，告诉它如何匹配。

【解决方案2】：

好的，据我所知，这种操作在 D3 中是没有捷径的。因此，我使用了基于 jQuery 的解决方案。供以后参考，我在这里分享。

Array.prototype.findDiff = function(that) {
    return {
        exit: $(this).not(that).get(),
        enter: $(that).not(this).get()
    };
};

所以，

[0,1,2,3,4].findDiff([1,2,3,4,5])

会给

{
    "exit": [
        0
    ],
    "enter": [
        5
    ]
}

【讨论】：