d3-force-attract II

Example illustrating the use of d3-force-attract with a dynamic attract target and a collision force.

forked from ericsoco's block: d3-force-attract II

<!DOCTYPE html>
<html>
  <head>
    <title>d3-force-attract: mouse attract II</title>
  </head>

//see also https://hi.stamen.com/forcing-functions-inside-d3-v4-forces-and-layout-transitions-f3e89ee02d12#.bt1svst8x
      
var width = 960,
    height = 500,
    radius = 10;

var nodes = d3.range(50).map(function (d) {
  return {
    x: width * Math.random(),
    y: height * Math.random(),
    r: radius,
    inertia: 0.05 + 0.15 * Math.random()
  };
});

// set up attract force to pull nodes toward mouse location.
// set attract strength per node, to prevent nodes from bunching up
// (and to demonstrate per-node attract parameters).
var simulation = d3.forceSimulation()
  .force('attract', d3.forceAttract()
    .target([width / 2, height / 2])
    .strength(function (d) { return d.inertia; }))
  .force('collide', d3.forceCollide(function (d) { return d.r; }))
  .on('tick', layoutTick)
  .nodes(nodes);
  
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

svg.on('mousemove', function () {
    simulation.force('attract').target(d3.mouse(this));
    simulation
      .alphaTarget(0.3)
      .restart();
  });
  
function layoutTick (e) {
  node
    .attr('cx', function (d) { return d.x; })
    .attr('cy', function (d) { return d.y; });
}

</script>
  </body>
</html>

https://d3js.org/d3.v4.min.js

https://unpkg.com/d3-force-attract@latest