D3 Examples - simple force applied to text

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", 800)
      .attr("height", 300);
    
    var nodes = [{text: "One", endx: 10},
                 {text: "Two", endx: 320}, 
                 {text: "Three", endx: 590}];
    
    var subject = svg.selectAll("text")
        .data(nodes)
      .enter().append("text")
      .text(function(d){return d.text})
        .style("font-size", 50)
      .attr("x", function(d) {return d.x})
        .attr("y", 40);
    
    // runs on every iteration of the simulation
    var everyTick = function() {
      subject.attr("x", function(d) {return d.x} );
    }
    
    var simulation = d3.forceSimulation()
        .force("center", d3.forceX(function(d) {return d.endx})
        .strength(0.02)
      );
    simulation.nodes(nodes).on("tick", everyTick);
    simulation.alphaTarget(0.3).restart();
    
  </script>
</body>
​
    