这与我的代码中发生的事情类似:https://codepen.io/anon/pen/zJmvXa?editors=1010
按“更新”按钮以查看问题。
这个codePen中的问题是它只重绘第一个元素(Myriel)。
我认为它必须围绕进入,退出或合并,但我不完全掌握正在发生的事情。
我认为合并是将现有数据与new合并,唯一应该进入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 });
这里的问题是你合并更新并输入选择...
forceNetwork.nodeEnter = forceNetwork.node
.enter()
.merge(forceNetwork.node);
......然后,附加圆圈(和线条):
forceNetwork.nodeEnter
.append("circle")
这必然会复制圆圈和线条。
而不是那样,在将圆和线附加到输入选择之后合并选择,并且还更改tick
函数中的选择。