javascript - 提供新数据后 D3 选择不再更新

Question

创建新选择并提供数据有效:

var svg = d3.select("body").append("svg");

var _nodeSelection = svg.insert("g").selectAll(".node");
var _nodeData = _nodeSelection.data(_nodes);

_nodeData
.enter().append("text")
.attr("class", "node");  

经过一些回调后，所有现有元素的属性都会发生变化，这有效!

_nodeData.attr("class", "update");

在另一个回调中，我向选择提供新数据，并尝试在调用 Enter/Exit 例程之前更新现有选择。

// No longer works after supplying new data
var _nodeData = _nodeSelection.data(_nodes);

// Does not work anymore:
_nodeData.attr("class", "update2");

这不再有效，因为类中没有更新到 update2。这让我感到惊讶，因为根据这个example这应该有效。

因此，对新数据选择调用 .Enter() 会在示例位置创建一组新元素作为旧元素，以便复制所有 svg 元素。

我做错了什么？

Answer 1

您始终必须使用 selectall 显式重新选择。 D3 在提供数据时对选择进行显式内部绑定(bind)，并且不能对同一选择应用两次。