D3键功能 [英] D3 Key Function
问题描述
正如读者可能从以下收集...我对D3是相当新的....我正在使用 .enter（）和 .exit（）。remove（）。我试图理解什么关键功能...？我正在使用Chrome> Console查看DOM，并且看不到 .data（dataSet，keyFunction）之间的任何明显差异，而且没有键功能 .data dataSet）。
As readers might gather from the following...I am fairly new to D3....I am experimenting at the moment using .enter() and .exit().remove(). I am trying to understand what the key function does...? I am viewing the DOM with Chrome > Console and cannot see any obvious differences between .data(dataSet, keyFunction) and without the key function .data(dataSet).
任何人都可以尝试任何试验（或控制台表达式），这可能有助于我了解什么是神秘的关键功能....
Can anybody please suggest any experiments to try (or console expressions) that may help me understand exactly what the mysterious key function does....
推荐答案
我也是d3的新手，并且正在努力使用键功能。我没有找到Tristan Reid的答案，因为它没有真正谈论关键的功能。
I'm also new to d3 and was struggling with the key function. I didn't find Tristan Reid's answer illuminating, because it doesn't really talk much about the key function.
让我们通过一个例子，首先没有键功能，然后与。
Let's work through an example, first without a key function, and then with.
这是我们在应用javascript之前的初始html。我们有两个div，没有任何数据。
Here's our initial html before applying javascript. We've got two divs, and there is no data attached to anything.
<body>
<div>** First div **</div>
<div>** Second div **</div>
</body>
调用没有键功能的数据（）
让我们添加几行JavaScript。
Calling data() with no key function
Let's add a couple lines of javascript.
var arr1 = [35, 70, 24, 86, 59];
d3.select("body")
.selectAll("div")
.data(arr1)
.enter()
.append("div")
.html(function(d) { return d });
我们的html现在是什么样子？这里是html以及相关数据的值（添加的注释）。
What does our html look like now? Here is the html along with the values of the associated data (comments added).
<body>
<div>** First div ** </div> <!-- data: 35 -->
<div>** Second div ** </div> <!-- data: 70 -->
<div>24</div> <!-- data: 24 -->
<div>86</div> <!-- data: 86 -->
<div>59</div> <!-- data: 59 -->
</body>
data（）调用与div数组匹配，值通过使用键。用于数组的默认键是索引。
The data() call matched an array of divs with an array of values by use of a key. The default keys used for the arrays is the indexes. So these are the keys that were used.
selected divs (by text) key data elements key
----------------------- --- ------------- ---
** First div ** 0 35 0
** Second div ** 1 70 1
24 2
86 3
59 4
沿着键，两个数据元素在选定的div中匹配 - 那些键为0和1.这些匹配的div被绑定到数据，但没有别的发生
Going by the keys, two of the data elements have matches in the selected divs -- those with keys 0 and 1. Those matching divs get bound to data, but nothing else happens them.
没有匹配键的所有数据元素都会传递到 enter（）。在这种情况下，键2，3和4没有匹配。所以这些数据元素被传递给 enter（），并为每个元素添加一个新的div。
All the data elements without a matching key get passed to enter(). In this case, there is no match for the keys 2, 3, and 4. So those data elements get passed to enter(), and a new div is appended for each of them. The appended divs are also bound to their respective data values.
让我们改变我们的javascript，保持我们有，但添加几行。我们将使用数据调用（使用不同的数组）执行相同的选择，但这次使用键功能。注意arr1和arr2之间的部分重叠。
Let's change our javascript, keeping what we have but adding a couple more lines. We'll perform the same selects with a data call (with a different array), but this time using a key function. Notice the partial overlap between arr1 and arr2.
var arr1 = [35, 70, 24, 86, 59];
d3.select("body")
.selectAll("div")
.data(arr1) // no key function
.enter()
.append("div")
.html(function(d) { return d });
var arr2 = [35, 7, 24, 2];
d3.select("body")
.selectAll("div")
.data(arr2, function(d) { return d }) // key function used
.enter()
.append("div")
.html(function(d) { return "new: " + d});
生成的html看起来像这样（添加注释）：
The resulting html looks like this (with comment added):
<body>
<div>** First div** </div> <!-- data: 35 -->
<div>** Second div ** </div> <!-- data: 70 -->
<div>24</div> <!-- data: 24 -->
<div>86</div> <!-- data: 86 -->
<div>59</div> <!-- data: 59 -->
<div>new: 7</div> <!-- data: 7 -->
<div>new: 2</div> <!-- data: 2 -->
</body>
第二次调用 data（）时使用函数返回的值为键。对于所选元素，函数返回从第一次调用 data（）时已经绑定到 的数据派生的值。
The second call to data() used the value returned by the function for the keys. For the selected elements, the function returns a value derived from the data that had already been bound to them by the first call to data(). That is, their key is based on their bound data.
对于第二个 data（）调用，用于匹配的键看起来像这样
For the second data() call, the keys used for matching look like this.
selected divs (by text) key data elements key
----------------------- --- ------------- ---
** First div ** 35 35 35
** Second div ** 70 7 7
24 24 24 24
86 86 2 2
59 59
没有匹配键的数据元素是7和2.这些数据元素被传递到 enter（）。所以我们得到两个新的divs附加到身体。
The data elements without matching keys are 7 and 2. Those data elements are passed to enter(). So we get two new divs appended to the body.
好吧，现在让我们回顾一下原来的帖子。 OP说，使用函数的数据（）调用和没有函数之间没有区别。这可能是因为 - 正如Tristan Reid建议的 - 关键函数被用于没有绑定数据的html元素。当没有绑定数据时，将没有匹配的键，所以所有的数据元素将传递到 enter（）函数。
Okay, so now let's look back at the original post. The OP said that there was no difference between the data() call with a function and without. That's probably because -- as Tristan Reid suggests -- the key function was being used on html elements that had no bound data. When there's no bound data, there will be no matching keys, so all of data elements will get passed to the enter() function.
通过这个例子，帮助我了解选择，键和绑定数据之间的关系。希望对别人有帮助。
Working through this example helped illuminate for me the relationships between selections, keys, and bound data. Hopefully it will be helpful to someone else.
这篇关于D3键功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
