D3.js forceSimulationの基本構成

D3.jsのforceSimulationでもっとも単純な構成のプログラムを紹介する。

サンプルプログラム

ノード、つまり円をドラッグできる。

D3.jsのforceSimulationは、ばねの力などを考慮してノードの位置を計算するものである。v3以前ではforce layoutとして定義されていたが、同じ関数を使用できなくなったため、それ以降のバージョンでは書き直す必要がある。設定できるパラメータはいくつかあるが、ここではすぐに使えることを目標に、最小構成のデモとコードを説明する。

サンプルコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 v5 force simulation</title>
</head>

<body>
  <svg width="400" height="300"></svg>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // 1. 描画するデータを用意
    var nodesData = [
      {},
      {},
      {},
      {},
      {},
      {}
    ]

    var linksData = [
      { "source": 0, "target": 1 },
      { "source": 1, "target": 4 },
      { "source": 2, "target": 3 },
      { "source": 2, "target": 5 },
      { "source": 5, "target": 1 }
    ]

    // 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", 7)
      .attr("fill", "LightSalmon")
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

    // 3. forceSimulationを設定
    var simulation = d3.forceSimulation()
      .force("link", d3.forceLink())
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(200, 150));

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

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

    // 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 nodesData = [
  {},
  {},
  {},
  {},
  {},
  {}
]

var linksData = [
  { "source": 0, "target": 1 },
  { "source": 1, "target": 4 },
  { "source": 2, "target": 3 },
  { "source": 2, "target": 5 },
  { "source": 5, "target": 1 }
]

nodesDataはノードのデータである。単純に描画するだけなら空のオブジェクト配列でもよい。linksDataはリンクデータで、接続する2つのノードIDであるsourceとtargetが必要である。

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", 7)
  .attr("fill", "LightSalmon")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

リンクとノードのSVG要素を追加する。call()でドラッグ時のイベント関数を登録している。これによりノードをドラッグできる。

3. forceSimulationを設定

ここからがforceSimulationの設定である。

リンクによるばねの力を動作させる。

d3.forceSimulation().force("link", d3.forceLink())

ノード間のクーロン力を動作させる。デフォルトでは反発力が設定される。この行を省略してもforceSimulationは動作する。

.force("charge", d3.forceManyBody())

すべてのノードの中心位置を設定する。なくても動作するが、ない場合は無重力状態になり、画面外へ要素が飛び出しても戻らなくなる。

.force("center", d3.forceCenter(200, 150));

シミュレーションにノード用データ配列を登録し、.on('tick', ...)では計算更新ごとに呼び出す関数を登録する。計算結果はノードのデータ配列に書き込まれる仕様なので、SVG要素を動かすには計算結果をSVG要素の位置へ反映する必要がある。

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

シミュレーションにリンク用データ配列を登録する。

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

4. forceSimulationの描画更新関数

次の関数は計算更新ごとに呼び出される。SVG要素を移動するため、計算結果をSVG要素の位置へ反映する。リンクデータのsourceとtargetは、最初に設定した数値ではなく、ノード用データ配列への参照になる。

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. ドラッグイベント関数

ドラッグ時のイベント関数である。dに保存されているのは登録されたノードのデータである。ノードのデータにfx、fyが定義されている場合、そのノードの座標は固定される。ドラッグ中にマウスの動きと連動させるため、ドラッグ開始時にドラッグ要素の位置を固定し、ドラッグ中はマウス座標(event.x、event.y)を反映し、ドラッグ終了時に固定を解除するためnullを代入する。

また、simulationは時間が経つと停止するため、ドラッグ開始時にsimulationがactiveでない場合は再起動する。このとき設定しているalphaTargetは、シミュレーションをなめらかにつなげるためにv4で導入された係数である。v3では再起動時にノードがジャンプするように動くようである。0から1の値を設定でき、低い値ほどなめらかになるが、0にすると再起動時にノードがまったく動かなくなる。

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;
}