javascript - 数据绑定(bind)中的关键函数 : objects vs strings

Question

使用 d3.selectAll(...).data(mydata, key_fn) 绑定(bind)数据时，我希望所有与之前绑定(bind)的数据匹配的键都以 update 结尾。选择(相对于 enter() 或 exit() )，但我发现如果先前绑定(bind)的数据是字符串而新绑定(bind)的数据是对象，情况并非如此。 这是预期的行为吗？如果是这样，有人可以解释为什么吗？
这是我的意思的一个例子，在 Chrome JS 控制台中使用 D3.js v5.15.0:

// Setup some data arrays, one with strings and one with objects using the same string values
    strings_only = ['A','B','C'];
    objects_with_values = [{key:'A',value:1},{key:'B',value:2},{key:'C',value:3}];
    
    // Bind the string data to the DOM with string values as keys
    d3.select('body').selectAll('div.test')
        .data(strings_only, d => d)
        .enter()
        .append('div')
        .attr('class','test');

    // Bind again with the strings and I get the expected behavior
    selection_strings_only = d3.select('body').selectAll('div.test')
        .data(strings_only, d => d);
    console.log(selection_strings_only.size() == strings_only.length); // PASS
    console.log(selection_strings_only.enter().size() == 0); // PASS
    
    // Bind with the objects (same key value) and they end up in the enter() selection
    selection_objects_with_values = d3.select('body').selectAll('div.test')
        .data(objects_with_values, d => d.key);
    console.log(selection_objects_with_values.size() == strings_only.length); // FAIL
    console.log(selection_objects_with_values.enter().size() == 0); // FAIL

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如果我的初始数据是一个对象数组而不是字符串(例如 [{key:'A'},{key:'B'},{key:C}] )，那么使用新对象的更新按预期工作，所以我能够解决这个问题，但我仍然对为什么我的初始方法感到困惑不工作。

Answer 1

要了解这里的问题是什么，必须了解，当使用 key function , 它被评估 两次 .

它针对元素进行了评估...

This key function is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]); the returned string is the element’s key.

...然后，再次对其进行评估，这次是针对数据:

The key function is then also evaluated for each new datum in data, being passed the current datum (d), the current index (i), and the group’s new data, with this as the group’s parent DOM element; the returned string is the datum’s key.

有了这些信息，我们就可以了解这里发生了什么:绑定(bind)后 objects_with_values作为数据，key函数将返回 undefined当它为元素运行时，因为这些元素没有 key属性(property)。看一看:

strings_only = ['A', 'B', 'C'];
objects_with_values = [{
  key: 'A',
  value: 1
}, {
  key: 'B',
  value: 2
}, {
  key: 'C',
  value: 3
}];

d3.select('body').selectAll('div.test')
  .data(strings_only, d => d)
  .enter()
  .append('div')
  .attr('class', 'test');

selection_objects_with_values = d3.select('body').selectAll('div.test')
  .data(objects_with_values, d => {
    console.log(d.key);
    return d.key;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

A, B, C,你看到后 3 undefined正如预期的那样，对应于 key 函数的第二次运行。
解决方法很简单:如果没有 d.key , 寻找 d只要:

.data(objects_with_values, d => d.key ? d.key : d);

这是您进行更改的代码:

strings_only = ['A', 'B', 'C'];
objects_with_values = [{
  key: 'A',
  value: 1
}, {
  key: 'B',
  value: 2
}, {
  key: 'C',
  value: 3
}];

// Bind the string data to the DOM with string values as keys
d3.select('body').selectAll('div.test')
  .data(strings_only, d => d)
  .enter()
  .append('div')
  .attr('class', 'test');

// Bind again with the strings and I get the expected behavior
selection_strings_only = d3.select('body').selectAll('div.test')
  .data(strings_only, d => d);
console.log(selection_strings_only.size() == strings_only.length); // PASS
console.log(selection_strings_only.enter().size() == 0); // PASS

// Bind with the objects (same key value) and they end up in the enter() selection
selection_objects_with_values = d3.select('body').selectAll('div.test')
  .data(objects_with_values, d => d.key ? d.key : d);
console.log(selection_objects_with_values.size() == strings_only.length); // FAIL
console.log(selection_objects_with_values.enter().size() == 0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>