Question

我使用D3 v4制作项目。但是，我在使用selection.data()和关键函数理解数据绑定时遇到了问题。

var data = [
  {"id": 1},
  {"id": 1}
];

var nodes = d3.selectAll("g").data(data, function(d){
  return d.id;
})

console.log(nodes.enter());

为什么nodes.enter().nodes().length等于两个？然后我尝试推送数据相同的id;它也在nodes.enter（） https://jsfiddle.net/Fboy/2jo3Lm6z/ 为什么会这样？

Answer 1

实际上，由于在D3 v4.x中选择不再是数组，而是对象，所以：

console.log(nodes.enter().length)

将返回undefined。但是这个：

console.log(nodes.enter().nodes())

将返回：

[EnterNode, EnterNode]

这是一个包含“enter”选项的2个元素的数组。因此：

console.log(nodes.enter().nodes().length)

将返回2。

Answer 2

关键功能本身并不能保证数据的唯一性。如果您希望数据具有明显的可识别性，则需要提供合适的密钥功能。 selection.data()：

详细记录了数据绑定对重复键的行为

如果多个数据具有相同的密钥，则将重复的数据放入回车选择中。

应用bindKey策略时，source中记录了同样的内容：

// Compute the key for each datum.
// If there a node associated with this key, join and add it to update.
// If there is not (or the key is a duplicate), add it to enter.
for (i = 0; i < dataLength; ++i) {
  keyValue = keyPrefix + key.call(parent, data[i], i, data);
  if (node = nodeByKeyValue[keyValue]) {       // [ac]: check if node exists for this key
    update[i] = node;
    node.__data__ = data[i];
    nodeByKeyValue[keyValue] = null;           // [ac]: will put duplicate data to enter 
  } else {                                     // [ac]: no corresponding node found
    enter[i] = new EnterNode(parent, data[i]); 
  }
}

表示[ac]的评论是我的。

因此，如果绑定一个包含两个具有相同键的对象的数组，并且没有与该键匹配的节点，则两个数据都将被放入回车选择中。

如何理解selection.data（）

2 个答案: