D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ocarneiro
Full window
Github gist
simple force applied to circles - d3 v4
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; } </style> </head> <body> <script> var svg = d3.select("body").append("svg") .attr("width", 600) .attr("height", 300); var nodes = [{a: 1, cx: 10},{a: 2, cx: 590}, {a: 3, cx: 120}]; var subject = svg.selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", 8) .attr("cx", function(d) {return d.cx}) .attr("cy", 40); var everyTick = function() { subject.attr("cx", function(d) {return d.x} ); } var simulation = d3.forceSimulation() .force("center", d3.forceX(function(d) {return d.cx}) .strength(0.02) ); simulation.nodes(nodes).on("tick", everyTick); simulation.alphaTarget(0.3).restart(); </script> </body>
https://d3js.org/d3.v4.min.js