Last active
March 10, 2018 15:52
-
-
Save tezzutezzu/cd04b3f1efee4186ff42aae66c87d1a7 to your computer and use it in GitHub Desktop.
Modifying a force layout
This file contains 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