Force Dragging

This example demonstrates applying d3-drag to a force-directed graph computed using d3-force. When the drag gesture starts, the targetted node is fixed to the pointer; it is released when the gesture ends. In addition, the simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value.

If desired, you could refine this technique by also fixing nodes on mouseover, and releasing them on mouseout. (However, if there’s an active drag gesture during mouseout, you wouldn’t want to release the node until the gesture finishes.)

Compare to the Canvas version.

forked from mbostock's block: Force Dragging I

forked from lwthatcher's block: Force Dragging

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
  stroke: #aaa;
}

.nodes circle {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

</style>
<svg width="600" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var points = genNodes(100);

var simulation = d3.forceSimulation()
    //.force("link", d3.forceLink().id(function(d) { return d.id; }))
//     .force("charge", d3.forceManyBody().strength(-34))
		.force("collide",  d3.forceCollide(20) )
    .force("center", d3.forceCenter(width / 2, height / 2))
		.force("bounce-on-container", function () {
        for (var i = 0, n = points.length, node; i < n; ++i) {
            node = points[i];
            var dx = node.x / width - 1 / 2,
                dy = node.y / height - 1 / 2,
                d2 = dx * dx + dy * dy;
            if (d2 > 0.25) {
                var angle = Math.atan2(dy, dx),
                    angle1 = Math.atan2(node.vy, node.vx),
                    angle2 = Math.PI - angle1 + 2 * angle,
                    norm = Math.sqrt(node.vx*node.vx + node.vy*node.vy);
                node.vx = norm * Math.cos(angle2);
                node.vy = norm * Math.sin(angle2);
            }

}
    })
		.alphaDecay(0.03)

var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(points)
    .enter().append("circle")
      .attr("r", 2.5)
  		.on("click", clicked)
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

node.append("title")
      .text(function(d) { return d.id; });

simulation
      .nodes(points)
      .on("tick", ticked);

//   simulation.force("link")
//       .links(graph.links);

function clicked(d) {
  console.log(d);
}
  
function dragstarted(d) {
  if (!d3.event.active) simulation.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) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

</script>

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