Je voudrais rendre un graphique dirigé par la force dans d3js v4 et fournir une fonction pour ajouter dynamiquement de nouveaux nœuds et liens à la simulation. Ma première tentative (voir ci-dessous) présente encore quelques problèmes majeurs :
- Les nœuds et les liens déjà existants semblent être ignorés par la force après l'ajout d'un lien
- Les liens entre les nœuds et les liens de simulation et leurs équivalents SVG ne fonctionnent pas.
Je pense connaître tous les exemples (par ex, [1](http://bl.ocks.org/ericcoopey/6c602d7cb14b25c179a4) , [2] ) démontrant une fonctionnalité similaire pour la v3, mais j'aimerais le faire avec la v4.
Merci pour votre aide !
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();
};
