D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jwilber
Full window
Github gist
d3-force node move example
Built with
blockbuilder.org
<!DOCTYPE html> <html> <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script> </head> <button id="clickMe" type="button">Move Nodes</button> <body> <svg id="svg" width="1200" height="500"></svg> <script> const width = 500 const height = 500 const svg = d3.select("svg") const trtCenter = width / 5 const cntrlCenter = width / 1.5 let sampleData = d3.range(24).map((d,i) => ({r: 40 - i * 0.5})) // define force let force = d3.forceSimulation() .force('charge', d3.forceManyBody().strength(1)) force.force('x', d3.forceX().strength(.3).x( width / 2)) force.force('y', d3.forceY().strength(.3).y(height / 3.5)) .force('collision', d3.forceCollide(d => 12)) .nodes(sampleData) .on('tick', changeNetwork) let dots = svg.selectAll('.dot') .data(sampleData) .enter() .append('g') .attr('class', 'dot') .attr('group', (d,i) => i % 2 == 0 ? 'trt' : 'ctrl') .append('circle') .attr('r', 10) .attr('fill', (d,i) => i % 2 == 0 ? 'pink' : 'olive') .attr('stroke', 'black') .attr('stroke-width', .4) function nodeTreatmentPos(d) { return d.index % 2 == 0 ? trtCenter : cntrlCenter; } function changeNetwork() { d3.selectAll('g.dot') .attr('transform', d=> `translate(${d.x}, ${d.y})`) } // function moveNodes() { force.force('center', null) .force('collision', d3.forceCollide(d => 12)) .alphaDecay(.08) force.force('x', d3.forceX().strength(1).x(nodeTreatmentPos)) force.force('y', d3.forceY().strength(1).y(height / 3.5)) force.alpha(.4).restart(); } // force for center function moveCenter() { force.force('center', null) .force('collision', d3.forceCollide(d => 12)) force.force('x', d3.forceX().strength(1.).x( width / 2)) force.force('y', d3.forceY().strength(1).y(height / 3.5)) force.alpha(.7).restart(); } // resolve locations of node on cliks let toCenter = true; d3.select('#clickMe') .on('click', function() { toCenter === true ? moveNodes() : moveCenter() toCenter = !toCenter }) </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js