D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
davidgutierrez
Full window
Github gist
ForceExample
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { background: #eee; } path { stroke:black; } </style> </head> <body> <h3>D3 Force Tutorial</h3> <div id="chart"></div> <script> var nodes=[ {name:"John", age:35, city:"Pereira"}, {name:"Jose", age:53, city:"Bogotá"}, {name:"Mafe", age:15, city:"Pereira"}, {name:"Mario", age:23, city:"Bogotá"}, {name:"Pedro", age:45, city:"Neiva"}, {name:"Jose", age:22, city:"Neiva"}, {name:"Karla", age:12, city:"Bogotá"} ]; var links = [ {source:"John", target:"Mafe", weight:10}, {source:"John", target:"Jose", weight:2}, {source:"Jose", target:"Mario", weight:5}, {source:"Mario", target:"Mafe", weight:8}, {source:"Mario", target:"Karla", weight:8} ]; var width=300, height=300; var svg = d3.select("#chart") .append("svg") .attr("width", width) .attr("height", height); var rScale = d3.scaleLinear() .range([2, 20]); var color = d3.scaleOrdinal(d3.schemeCategory10); var simulation = d3.forceSimulation() // .force("charge", d3.forceManyBody() // .strength(-1)) .force("center", d3.forceCenter(width/2,height/2)); function update(nodes, links) { rScale.domain(d3.extent(nodes, function (d) { return d.age; })); simulation .force("link", d3.forceLink() .id(function(d) { return d.name; })); simulation.nodes(nodes); simulation.force("link") .links(links); simulation.on("tick", ticked) .force("collide", d3.forceCollide( function (d) { return rScale(d.age); } ).strength(0.7)) var nodesSel = svg.selectAll(".nodes") .data(nodes); var nodesEnter = nodesSel.enter() .append("g") .attr("class","nodes") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); nodesEnter.append("circle") .attr("r", function (d) { return rScale(d.age); }) .style("fill", function (d) { return color(d.city); }); var linksSel = svg.selectAll(".links") .data(links); var linksEnter = linksSel.enter() .append("path") .attr("class","links"); function ticked() { //console.log("ticked!"); linksSel .merge(linksEnter) .attr("d", function (d) { return "M" + d.source.x + " " + d.source.y + " L " + d.target.x + " " + d.target.y; }); nodesSel .merge(nodesEnter) .attr("transform", function (d) { return "translate(" + d.x +"," + d.y + ")"; }); } } update(nodes, links); function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x, d.fy = d.y; } function dragged(d) { d.fx = d3.event.x, d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null, d.fy = null; } </script> </body>
https://d3js.org/d3.v4.min.js