这里有一些类似于我的代码中发生的事情:
https://codepen.io/anon/pen/zJmvXa?editors=1010
按更新按钮查看问题。
这个代码笔的问题是,它只重绘了第一个元素(Myriel)。
我认为合并是将现有数据与新数据合并,唯一应该进入enter的数据应该是新数据。出口是为了删除冗余数据?
由于此图既有圆又有文本,是否应该对包含这些圆的“g”元素进行合并?
也许这与数据函数有关:
.data(dataset1.nodes, function(d, i) {
return d;
});
如果我将其更改为使用d.id,它会再次重新呈现所有内容。我想这是因为数据有id属性。这应该怎么做?
// Apply the general update pattern to the nodes.
forceNetwork.node = d3
.select("#nodesContainer")
.selectAll("g.network-node")
.data(dataset1.nodes, function(d, i) {
return d
});
forceNetwork.node.exit().remove();
forceNetwork.nodeEnter = forceNetwork.node
.enter()
.append("g")
.attr("id", function(d, i) {
return "network-g-node-" + d.id;
})
.attr("class", function(d, i) {
return "network-node";
})
.call(
d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
).merge(forceNetwork.node);
forceNetwork.nodeEnter
.append("circle")
.attr("id", function(d) {
return d.id;
})
.attr("class", "networkviewer-node")
.attr("fill", "red")
.attr("r", 20);
// Append images
forceNetwork.nodeEnter
.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });