D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jwilber
Full window
Github gist
d3v4 force add new nodes
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .option {font-size: 30px;} </style> </head> <body> <center> <input name="updateButton" type="button" value="Add Node" onclick="clickButton()" class="option"/> </center> <script> // chart stuff const width = 1000 const height = 600 const svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) // initital data let sampleData = d3.range(2).map((d,i) => ({r: 40 - i * 0.5})); function changeNetwork() { d3.selectAll('.force1') .attr('cx', d => d.x) .attr('cy', d => d.y) }; function force1(data) { const manyBody = d3.forceManyBody().strength(2) const center = d3.forceCenter().x((width/2)).y((height/2)) // define force let force = d3.forceSimulation() .force('charge', manyBody) .force('center', center) .force('collision', d3.forceCollide(d => d.r + 2)) .velocityDecay(.48); force .nodes(data) .on('tick', changeNetwork); svg.selectAll('circle') .data(data) .enter() .append('circle') .attr('class', 'force1') .style('fill', 'coral') .attr('r', d => d.r) return force } function clickButton() { // generate random data point let ranNum = Math.round(Math.random() * 20); let newDataPoint = {r: 40 - ranNum * 0.5} // update datasource sampleData = sampleData.concat(newDataPoint); let nodes = svg.selectAll('circle.force1') .data(sampleData); let nodeEnter = nodes.enter() .append('circle') .attr('class', 'force1') .style('fill', 'blue') .attr('r', d => d.r / 2) nodes = nodeEnter.merge(nodes) .on('tick', changeNetwork) f1.nodes(sampleData); f1.alpha(1).restart() } let f1 = force1(sampleData); </script> </body>
https://d3js.org/d3.v4.min.js