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 circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; 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(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; 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>