data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.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) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script> <svg id="content" width="800" height="400" ></svg>