Cold 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.

Unlike 'Force Dragging I', the simulation remains “cold” after it has settled. All nodes retain fixed positio.

Compare to the Canvas version.

forked from mbostock's block: Force Dragging I

forked from akollegger's block: Force Dragging I

forked from akollegger's block: Cold Force Dragging

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

.links line {
    stroke: #aaa;
  }

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

.nodes circle.fixed {
    fill: #fe3838;
  }
  
  .nodes circle.selected {
    stroke: #000000;
    stroke-width: 1.5px;
  }
  
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line");

var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5.0)
      .on("click", selectedNode)
      .on("dblclick", selectedNeighborhood)
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
  
  ;

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

simulation
      .nodes(graph.nodes)
      .on("tick", ticked);
  
  simulation
  	.on("end", settled);

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

node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
    		.classed("fixed", function(d) { 
      		return (d.vx < 0.01) && (d.vy < 0.01);
    		})
    ;
  };
  
  function settled() {
    node.data().forEach( function(d) { 
      d.fx = d.x; 
      d.fy = d.y; 
    });
  };
  
  function selectedNode(d) {
    if (d3.event.defaultPrevented) return; // dragged

d3.select(this).classed("selected", true);
  }
  
  function selectedNeighborhood(d) {
    if (d3.event.defaultPrevented) return; // dragged

d3.select(this).classed("selected", true);
  }

});

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