Built with blockbuilder.org
Last active
May 4, 2023 08:19
-
-
Save bsullins/4e6ea24fe0739c88a2fd95125a616a5b to your computer and use it in GitHub Desktop.
Simple Force Layout in D3
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"> | |
| <style> | |
| .node { | |
| fill: #ccc; | |
| stroke: #fff; | |
| stroke-width: 2px; | |
| } | |
| /*add css for links*/ | |
| .link { | |
| stroke: #777; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| // set a width and height for our SVG | |
| var width = 640, | |
| height = 480; | |
| // setup links | |
| var links = [ | |
| { source: 'Baratheon', target:'Lannister' }, | |
| { source: 'Baratheon', target:'Stark' }, | |
| { source: 'Lannister', target:'Stark' }, | |
| { source: 'Stark', target:'Bolton' }, | |
| ]; | |
| // create empty nodes array | |
| var nodes = {}; | |
| // compute nodes from links data | |
| links.forEach(function(link) { | |
| link.source = nodes[link.source] || | |
| (nodes[link.source] = {name: link.source}); | |
| link.target = nodes[link.target] || | |
| (nodes[link.target] = {name: link.target}); | |
| }); | |
| // add a SVG to the body for our viz | |
| var svg=d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| // use the force | |
| var force = d3.layout.force() | |
| .size([width, height]) | |
| .nodes(d3.values(nodes)) | |
| .links(links) | |
| .on("tick", tick) | |
| .linkDistance(300) | |
| .start(); | |
| // add links | |
| var link = svg.selectAll('.link') | |
| .data(links) | |
| .enter().append('line') | |
| .attr('class', 'link'); | |
| // add nodes | |
| var node = svg.selectAll('.node') | |
| .data(force.nodes()) | |
| .enter().append('circle') | |
| .attr('class', 'node') | |
| .attr('r', width * 0.03); | |
| // what to do | |
| function tick(e) { | |
| node.attr('cx', function(d) { return d.x; }) | |
| .attr('cy', function(d) { return d.y; }) | |
| .call(force.drag); | |
| 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; }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment