Adjustable Link Strength

This example demonstrates how to modify the parameters of a force-directed graph. After modifying the desired parameter (here link.strength), you should reheat the simulation using simulation.alpha and simulation.restart. Alternatively, you can prevent the simulation from cooling by setting simulation.alphaDecay to 0, or by setting simulation.alphaTarget to a positive value.

forked from mbostock's block: Adjustable Link Strength

<!DOCTYPE html>
<style>

label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 10px;
  top: 10px;
}

</style>
<canvas width="960" height="600"></canvas>
<label><input style="width:240px;" type="range" min="0" max="1" step="any" value="0.5"> Link Strength</label>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;

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

d3.select("input[type=range]")
    .on("input", inputted);

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

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

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

function ticked() {
    context.clearRect(0, 0, width, height);

context.beginPath();
    graph.links.forEach(drawLink);
    context.strokeStyle = "#aaa";
    context.stroke();

context.beginPath();
    graph.nodes.forEach(drawNode);
    context.fill();
    context.strokeStyle = "#fff";
    context.stroke();
  }
});

function inputted() {
  simulation.force("link").strength(+this.value);
  simulation.alpha(1).restart();
}

function drawLink(d) {
  context.moveTo(d.source.x, d.source.y);
  context.lineTo(d.target.x, d.target.y);
}

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}

</script>

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