Mike Bostock has an example关于更新强制布局。该示例基于v3 - 如何在v4中复制相同的功能?D3 v4:更新强制布局
我读过the changes在v4 Changelog中的选择,但merge
调用仍然令人困惑。特别是,我不清楚数据加入如何与模拟nodes()
和links()
调用进行交互。
Mike Bostock has an example关于更新强制布局。该示例基于v3 - 如何在v4中复制相同的功能?D3 v4:更新强制布局
我读过the changes在v4 Changelog中的选择,但merge
调用仍然令人困惑。特别是,我不清楚数据加入如何与模拟nodes()
和links()
调用进行交互。
var width = 300,
height = 200;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var nodes = [],
links = [];
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width/2, height/2));
var svg = d3.select("svg");
var linkLayer = svg.append('g').attr('id','link-layer');
var nodeLayer = svg.append('g').attr('id','node-layer');
// 1. Add three nodes and three links.
setTimeout(function() {
var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
nodes.push(a, b, c);
links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
start();
}, 0);
// 2. Remove node B and associated links.
setTimeout(function() {
nodes.splice(1, 1); // remove b
links.shift(); // remove a-b
links.pop(); // remove b-c
start();
}, 2000);
// Add node B back.
setTimeout(function() {
var a = nodes[0], b = {id: "b"}, c = nodes[1];
nodes.push(b);
links.push({source: a, target: b}, {source: b, target: c});
start();
}, 4000);
function start() {
var link = linkLayer.selectAll(".link")
.data(links, function(d) { return d.source.id + "-" + d.target.id; });
link.enter().append("line")
.attr("class", "link");
link.exit().remove();
var node = nodeLayer.selectAll(".node")
.data(nodes, function(d) { return d.id;});
node.enter().append("circle")
.attr("class", function(d) { return "node " + d.id; })
.attr("r", 8);
node.exit().remove();
simulation
.nodes(nodes)
.on("tick", tick);
simulation.force("link")
.links(links);
}
function tick() {
nodeLayer.selectAll('.node').attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
linkLayer.selectAll('.link').attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}
.link {
stroke: #000;
stroke-width: 1.5px;
}
.node {
fill: #000;
stroke: #fff;
stroke-width: 1.5px;
}
.node.a { fill: #1f77b4; }
.node.b { fill: #ff7f0e; }
.node.c { fill: #2ca02c; }
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="300px" height="200px"></svg>
所以你实际上并不需要一D3选择合并,使您的工作例子。原因是您的节点位置和链接正在被模拟更新。因此,您需要在开始时添加节点和链接,但在开始模拟时,在开始方法结束时会发生任何位置更新。
原始代码的一个主要缺陷是您在脚本的初始阶段调用了svg.selectAll('。node')& svg.selectAll('。link')。当你这样做时,没有任何节点或链接绑定到svg,所以你得到一个d3选择与空DOM元素。当你想用enter()。append()添加元素时,这很好 - 但是当删除元素时,这是行不通的。使用同样的方法,过时的d3选择用exit()remove()移除元素不起作用b/c d3选择中没有任何DOM元素要移除。您需要每次调用svg.selectAll()以获取当前在svg中的DOM元素。
我也在你的代码中做了一些小的改动。您通常希望链接始终显示在节点下方。在向SVG添加元素时,最近添加的节点位于顶部。但是,如果您事先添加组(例如,我在代码中使用linkLayer & nodeLayer),则任何新添加的链接都将出现在nodeLayer组中的任何项目的下方。
似乎已完成https://bl.ocks.org/tezzutezzu/cd04b3f1efee4186ff42aae66c87d1a7 –