我想在 d3js v4 中呈现一个力导向图，并提供一个函数来动态添加新节点和链接到模拟中。我的第一次尝试(见下文)仍然存在一些主要问题:
- 已经存在的节点和链接似乎被强制忽略了 添加链接后的模拟
- 模拟节点和链接与其对应的 SVG 之间的绑定(bind)以某种方式不起作用
我想我知道所有演示 v3 类似功能的示例(例如 [1、2])，但我想用 v4 来做。
感谢您的帮助!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/graph.js"></script>
<style type="text/css">
.links line {
stroke: #aaa;
}
.nodes circle {
pointer-events: all;
stroke: none;
stroke-width: 40px;
}
</style>
</head>
<body>
<div class="chart-container" style="max-width: 1000px;"></div>
<button class="expand">Expand graph</button>
<script type="text/javascript">
//sample graph dataset
var graph = {
"nodes": [
{"id": "A"},
{"id": "B"},
{"id": "C"},
{"id": "D"},
{"id": "E"},
{"id": "F"}
],
"links": [
{"source": "B", "target": "A"},
{"source": "C", "target": "A"},
{"source": "D", "target": "A"},
{"source": "D", "target": "C"},
{"source": "E", "target": "A"},
{"source": "F", "target": "A"}
]
}
//graph container
var targetElement = document.querySelector('.chart-container');
var graph = new Graph(targetElement, graph);
d3.selectAll('button.expand').on('click', function (){
var nodes = [
{"id": "G", "group": 1}
];
var links = [
{"source": "F", "target": "G", "value": 1}
];
graph.expandGraph(links, nodes);
});
</script>
</body>
</html>
graph.js
var Graph = function(targetElement, graph) {
var self = this,
width = targetElement.offsetWidth,
height = width / 2,
svg = d3.select(targetElement).append('svg')
.attr("width", width)
.attr("height", height),
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)),
link = svg.append("g")
.attr("class", "links")
.selectAll("line"),
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle"),
update = function() {
// Redefine and restart simulation
simulation.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
// Update links
link = link.data(graph.links);
// Enter links
link = link.enter().append("line");
// Exit any old links
link.exit().remove();
// Update the nodes
node = node.data(graph.nodes);
// Enter any new nodes
node = node.enter().append("circle")
.attr("r", 5)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
// Exit any old nodes
node.exit().remove();
function ticked() {
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; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
},
dragstarted = function(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
},
dragged = function(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
},
dragended = function(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
},
expandGraph = function(links, nodes) {
for (var i=0; i < nodes.length; i++) {
console.log('adding node', nodes[i]);
graph.nodes.push(nodes[i]);
}
for (var i=0; i < links.length; i++) {
console.log('adding link', links[i]);
graph.links.push(links[i]);
}
update();
};
// Public functions
this.expandGraph = expandGraph;
update();
};
最佳答案
您忘记了 merge() 您的节点。我已经快速更新了您的代码:
graph.js
var Graph = function(targetElement, graph) {
var self = this,
width = targetElement.offsetWidth,
height = width / 2,
svg = d3.select(targetElement).append('svg')
.attr("width", width)
.attr("height", height),
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)),
linkGroup = svg.append("g")
.attr("class", "links"),
nodeGroup = svg.append("g")
.attr("class", "nodes"),
update = function() {
// Redefine and restart simulation
simulation.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
// Update links
link = linkGroup
.selectAll("line")
.data(graph.links);
// Enter links
linkEnter = link
.enter().append("line");
link = linkEnter
.merge(link);
// Exit any old links
link.exit().remove();
// Update the nodes
node = nodeGroup.selectAll("circle").data(graph.nodes);
// Enter any new nodes
nodeEnter = node.enter().append("circle")
.attr("r", 5)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node = nodeEnter.merge(node);
// Exit any old nodes
node.exit().remove();
function ticked() {
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; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
},
dragstarted = function(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
},
dragged = function(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
},
dragended = function(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
},
expandGraph = function(links, nodes) {
for (var i=0; i < nodes.length; i++) {
console.log('adding node', nodes[i]);
graph.nodes.push(nodes[i]);
}
for (var i=0; i < links.length; i++) {
console.log('adding link', links[i]);
graph.links.push(links[i]);
}
update();
};
// Public functions
this.expandGraph = expandGraph;
update();
};
其实我不是 100% 理解这个新功能，但你总是需要将你的新链接和节点(即 linkEnter 和 nodeEnter)与你现有的图表合并.如果你不这样做，你的旧 Graph 就会死掉......
Mike Bostock 在这里举了一个如何使用 merge 的例子:
https://bl.ocks.org/mbostock/3808218
关于javascript - d3js v4 : Add nodes to force-directed graph，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40018270/