D3 Examples - simple force applied to circles

xxxxxxxxxx
 
<!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>
​
    