D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tezzutezzu
Full window
Github gist
Modifying a force layout
<!DOCTYPE html> <meta charset="utf-8"> <title>Modifying a force layout v4</title> <style> .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; } </style> <body> <script src="//d3js.org/d3.v4.js"></script> <script> var width = 960, height = 500; var color = d3.scaleOrdinal(d3.schemeCategory10); var nodes = [], links = []; var simulation = d3.forceSimulation() .force("link", d3.forceLink().distance(200).strength(.6)) .force("charge", d3.forceManyBody()) // use forceX and forceY instead to change the relative positioning // .force("centering", d3.forceCenter(width/2, height/2)) .force("x", d3.forceX(width/2)) .force("y", d3.forceY(height/2)) .on("tick", tick); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var a = createNode("a"); var b = createNode("b"); var c = createNode("c"); nodes= [a]; start(); // 1. add the links setTimeout(function() { nodes= [a,b,c]; links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c}); start(); }, 1000); // 2. Remove node B and associated links. setTimeout(function() { // remove b nodes = [a,c]; // remove a-b links = [links[1]]; start(); }, 2000); // Add node B back. setTimeout(function() { b = createNode("b") nodes.push(b); links.push({source: a, target: b}, {source: b, target: c}); start(); }, 3000); function createNode(id) { return {id: id, x: width/2, y:height/2} } function start() { var nodeElements = svg.selectAll(".node").data(nodes, function(d){return d.id}); var linkElements = svg.selectAll(".link").data(links); nodeElements.enter().append("circle").attr("class", function(d) {return "node " + d.id; }).attr("r", 8); linkElements.enter().insert("line", ".node").attr("class", "link"); nodeElements.exit().remove(); linkElements.exit().remove(); simulation.nodes(nodes) simulation.force("link").links(links) simulation.restart(); } function tick() { var nodeElements = svg.selectAll(".node"); var linkElements = svg.selectAll(".link"); nodeElements.attr("cx", function(d,i) {return d.x; }) .attr("cy", function(d) { return d.y; }) linkElements.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; }); } </script>
https://d3js.org/d3.v4.js