D3.js forceSimulationのハイライト表示

D3.js forceSimulationでクリックした要素と、それに関連する要素やリンクをハイライト表示する方法を説明する。
Tags:

サンプルプログラム: ノードをクリックしてみる

この例は、こちらの例にクリック時のハイライト機能を追加したものである。このページではコードのハイライト部分だけを説明する。他の部分はこちらを参照する。

コードを確認

サンプルコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 v5 force simulation node click response</title>
  <!-- 0. スタイルを設定 -->
  <style type="text/css">
    .selected {
      fill: tomato;
    }

    .linkSelected {
      stroke: tomato;
    }

    .conected {
      fill: orange;
    }
  </style>
</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 = [];
    for (var i = 0; i < nodeNumber; i++) {
      for (var j = i + 1; j < nodeNumber; j++) {
        if (Math.random() > 0.9) {
          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", 2)
      .attr("stroke", "black");

    var d3_drag = d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);

    var node = d3.select("svg")
      .selectAll("circle")
      .data(nodesData)
      .enter()
      .append("circle")
      .attr("r", function (d) { return d.r })
      .attr("fill", "Gold")
      .attr("stroke", "black")
      .call(d3_drag)
      .on("click", clicked);

    function clicked(event, d) {

      d3.selectAll(".selected").classed("selected", false);
      d3.selectAll(".conected").classed("conected", false);
      d3.selectAll("line").classed("linkSelected", false);

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

      d3.selectAll("line")
        .filter(function (v, i) {
          if (d == v.source) {
            node.each(function (vj, j) {
              if (v.target == vj) d3.select(this).classed("conected", true);
            });
            return true;
          } else if (d == v.target) {
            node.each(function (vj, j) {
              if (v.source == vj) d3.select(this).classed("conected", true);
            });
            return true;
          }
        }).classed("linkSelected", true);

    }

    // 3. forceSimulationを設定
    var simulation = d3.forceSimulation()
      .force("link",
        d3.forceLink()
          .distance(function (d) { return d.l; })
          .iterations(2))
      .force("collide",
        d3.forceCollide()
          .radius(function (d) { return d.r; })
          .strength(0.7)
          .iterations(2))
      .force("charge", d3.forceManyBody().strength(-100))
      .force("x", d3.forceX().strength(0.01).x(width / 2))
      .force("y", d3.forceY().strength(0.01).y(height / 2))
      .force("center", d3.forceCenter(width / 2, 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();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }

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

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

</html>

説明

0. スタイルを設定

<style type="text/css">
.selected {
  fill: tomato;
}

.linkSelected {
  stroke: tomato;
}

.conected {
  fill: orange;
}
</style>

クリック時に追加するスタイルを設定する。

2. SVG要素の配置とクリックイベント登録

selection.on("click", clicked);

function clicked(event, d) {

  d3.selectAll(".selected").classed("selected", false);
  d3.selectAll(".conected").classed("conected", false);
  d3.selectAll("line").classed("linkSelected", false);

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

  d3.selectAll("line")
    .filter(function (v, i) {
      if (d == v.source) {
        node.each(function (vj, j) {
          if (v.target == vj) d3.select(this).classed("conected", true);
        });
        return true;
      } else if (d == v.target) {
        node.each(function (vj, j) {
          if (v.source == vj) d3.select(this).classed("conected", true);
        });
        return true;
      }
    }).classed("linkSelected", true);

}

クリック時のイベントをonメソッドでノード要素に登録する。"click"イベントを登録しているが、タブレットやスマートフォンの"touch"イベントにも自動で対応する。

クリック時のイベント関数では、まずclassedメソッドを使ってすべてのハイライトを解除する。classedメソッドは、引数にクラス名、先頭に.を付けない点に注意、とbooleanの2つを受け取り、falseならクラスを解除し、trueなら登録する。trueのとき、すでに同じ名前のクラスが登録されている場合は何もしない。

クリックしたノード要素にselectedクラスを追加した後、filterとeachメソッドを使って、クリックしたノード要素に接続されたリンクとノードを探索し、クラスを追加する。