在d3中动态更新力模拟的数据后,节点的g元素在与链接指向的位置不同的位置初始化,并且在拖动它们时它们不会同步移动。 Here is what the graph looks like after adding a node
我按照本教程了解更新模式:https://bl.ocks.org/mbostock/1095795。
我创建了我的链接和节点,如下所示:
// update graph for nodes
node = node.data(graph.nodes, function (d) { return d.id; });
node.exit().remove();
node = node.enter().append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.merge(node);
node
.append("circle")
.attr("r", function (d) { return d.id == undefined ? 0 : d.width / 2 + 2 * padding; })
.attr("fill", function (d) { return color(d.type); })
.attr('stroke', '#000000')
.attr('stroke-width', '3');
console.log(graph.nodes);
// add the text to the group
node
.append('text')
.text(node => node.type)
.attr('font-size', 15)
.attr('font-family', fontFamily)
.attr('dx', function (d) { return -d.width / 2 })
.attr('dy', 4);
// update links
link = link.data(graph.links);
link.exit().remove();
link = link.enter()
.append("line")
.attr("stroke-width", "4px")
.merge(link);
// restart simulation
simulation.nodes(graph.nodes);
simulation.force("link").links(graph.links);
simulation.alpha(0.01);
simulation.restart();
并在节点和链接数据如此更改时更新图表:
get