-
-
Save muzy/9ad3e93c5e9694fcbc5f84f38d2f86f8 to your computer and use it in GitHub Desktop.
Modifying a force layout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment