D3.js forceSimulationのリンク作用力

D3.js forceSimulationプログラムにおけるリンクによる相互作用を説明する。

サンプルプログラム

ノード、つまり円をドラッグしてみる。

サンプルコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 v7 force simulation node detail</title>
</head>

<body>
  <svg width="800" height="600"></svg>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // 1. 描画するデータを用意
    var width = document.querySelector("svg").clientWidth;
    var height = document.querySelector("svg").clientHeight;
    var nodeNumber = 30;
    var nodesData = [];
    for (var i = 0; i < nodeNumber; i++) {
      nodesData.push({
        "index": i,
        "x": width * Math.random(),
        "y": height * Math.random(),
        "r": 10
      });
    }
    var linksData = [];
    var i = 0;
    for (var j = i + 1; j < nodeNumber; j++) {
      linksData.push({
        "source": i,
        "target": j,
        "l": Math.random() * 150 + 5 + nodesData[i].r + nodesData[j].r
      });
    }

    // 2. SVG要素を追加
    var link = d3.select("svg")
      .selectAll("line")
      .data(linksData)
      .enter()
      .append("line")
      .attr("stroke-width", 1)
      .attr("stroke", "black");

    var node = d3.select("svg")
      .selectAll("circle")
      .data(nodesData)
      .enter()
      .append("circle")
      .attr("r", function (d) { return d.r })
      .attr("fill", "LightSalmon")
      .attr("stroke", "black")
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

    // 3. forceSimulationを設定
    var simulation = d3.forceSimulation()
      .force("link",
        d3.forceLink()
          .distance(function (d) { return d.l; })
          .strength(0.03)
          .iterations(16))
      .force("collide",
        d3.forceCollide()
          .radius(function (d) { return d.r; })
          .strength(0.7)
          .iterations(16))
      .force("charge", d3.forceManyBody().strength(-200))
      .force("x", d3.forceX().strength(0.02).x(width / 2))
      .force("y", d3.forceY().strength(0.02).y(height / 2));

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

    simulation.force("link")
      .links(linksData)
      .id(function (d) { return d.index; });

    // 4. forceSimulationの描画更新関数
    function ticked() {
      link
        .attr("x1", function (d) { return d.source.x; })
        .attr("y1", function (d) { return d.source.y; })
        .attr("x2", function (d) { return d.target.x; })
        .attr("y2", function (d) { return d.target.y; });
      node
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; });
    }

    // 5. ドラッグイベント関数
    function dragstarted(event, d) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

    function dragged(event, d) {
      d.fx = event.x;
      d.fy = event.y;
    }

    function dragended(event, d) {
      if (!event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
    }
  </script>
</body>

</html>

説明

1. 描画するデータを用意

var width = document.querySelector("svg").clientWidth;
var height = document.querySelector("svg").clientHeight;
var nodeNumber = 30;
var nodesData = [];
for (var i = 0; i < nodeNumber; i++) {
  nodesData.push({
    "index": i,
    "x": width * Math.random(),
    "y": height * Math.random(),
    "r": 10
  });
}

document.querySelector(...)でsvgの幅と高さを取得する。

リンクで接続するノードのIDには任意のキー名を指定できる。上のコードではindexをノード用データ配列へ保存し、後で指定している。IDは数値ではなく文字列でも指定できる。

var linksData = [];
var i = 0;
for (var j = i + 1; j < nodeNumber; j++) {
  linksData.push({
    "source": i,
    "target": j,
    "l": Math.random() * 150 + 5 + nodesData[i].r + nodesData[j].r
  });
}

リンク用の配列データlinksDataを作成する。上のコードではリンクごとに長さを変えるため、lを定義している。

2. SVG要素を追加

リンクとノードのsvg要素を追加する。call(...)でドラッグ発生時のイベント関数を登録している。

3. forceSimulationを設定

var simulation = d3.forceSimulation()
  .force("link",
    d3.forceLink()
    .distance(function(d) { return d.l; })
    .strength(0.03)
    .iterations(16)) // <<< リンクによる相互作用
  .force("collide",
    d3.forceCollide()
    .radius(function(d) { return d.r; })
    .strength(0.7)
    .iterations(16))
  .force("charge", d3.forceManyBody().strength(-200))
  .force("x", d3.forceX().strength(0.02).x(width / 2))
  .force("y", d3.forceY().strength(0.02).y(height / 2));

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

simulation.force("link")
  .links(linksData)
  .id(function(d) { return d.index; }); // <<< リンクによる相互作用

forceSimulationで設定できるリンクによる相互作用を説明する。

“link”: リンクによる相互作用

.force("link",
  d3.forceLink()
  .distance(function(d) { return d.l; })
  .strength(0.03)
  .iterations(16))

関数	説明
`distance`	リンクの長さを設定する。リンクは常に設定された長さへ戻ろうとする。デフォルトは30である。
`strength`	リンクの強度を設定する。デフォルトは`1/Math.min(count(link.source), count(link.target))`である。それぞれ1つずつノードに接続されていれば1である。同じノード間に2つのリンクがあっても反作用力は同じになる。
`iterations`	`simulation`の反復回数を設定する。反復回数を増やすと計算は安定するが、計算時間は増える。デフォルトは1である。

  simulation.force("link")
    .links(linksData)
    .id(function(d) { return d.index; });

id(...)でインデックス化するキー名を指定する。デフォルトはnode.indexである。

4. forceSimulationの描画更新関数

シミュレーションのステップごとに呼び出される関数である。SVG要素を移動するため、計算結果をSVG要素の位置へ反映する。

5. ドラッグイベント関数

ドラッグ時のイベント関数である。