D3.js v5 入門｜#9 円グラフにクリックイベントを追加する

円グラフにクリックイベントを追加する方法について記載しています。
円グラフの作成方法は、こちら（#7）を参照してください。

次のような円グラフの各データをクリックすると、アラートメッセージを表示するように実装します。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>d3 circle chart event</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/d3.min.js"></script>
    <style type="text/css">
      .bar {
        fill: steelblue;
      }
      .axis text {
        font: 10px sans-serif;
        color: #333;
      }
      #chart{
        width:600px;
        height:600px;
      }
    </style>
  </head>
  <body>

    <svg id="chart"></svg>

    <script>

      var data = [
        {name: "A", value: 5000},
        {name: "B", value: 2500},
        {name: "C", value: 1250},
        {name: "D", value: 1000},
        {name: "E", value: 250},
      ];

      var width = 500;
      var height = 500

      // dataの nameごとにグラフで使用する色を設定
      var color = d3.scaleOrdinal()
          .domain(data.map(d => d.name))
          .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());

      // 円グラフの内側・外側半径の設定
      var arc = d3.arc()
          .innerRadius(0)
          .outerRadius(Math.min(width, height) / 2 - 1);

      // 円グラフのラベル表示位置を設定
      const radius = Math.min(width, height) / 2 * 0.57;
      var arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);

      // 円グラフ作成用の角度を計算
      var arcs = d3.pie()
          .sort(null) // data配列の順番でグラフを作成（未指定の場合は、valueの降順）
          .value(function(d) { return d.value; })
          (data);

      // 円グラフ描画エリアを選択
      var svg = d3.select("#chart")
          .attr("text-anchor", "middle")
          .style("font", "12px sans-serif")

      // g要素を追加
      const g = svg.append("g")
          .attr("transform", `translate(${width / 2},${height / 2})`);

      // g要素に各データのpath要素を追加
      g.selectAll("path")
        .data(arcs)
        .enter().append("path")
          .attr("fill", d => color(d.data.name))
          .attr("stroke", "white")
          .attr("d", arc)
        .append("title")
          .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);

      // データごとにtext要素を設定
      const text = g.selectAll("text")
        .data(arcs)
        .enter().append("text")
          .attr("transform", d => `translate(${arcLabel.centroid(d)})`)
          .attr("dy", "0.35em");

      // text要素にデータ名を設定（dataのnameを設定）
      text.append("tspan")
          .attr("x", 0)
          .attr("y", "-0.7em")
          .style("font-weight", "bold")
          .text(d => d.data.name);

      // text要素にデータ名を設定（dataのvalueを設定）
      text.filter( d => (d.endAngle - d.startAngle) > .7535).append("tspan")
          .attr("x", 0)
          .attr("y", "0.7em")
          .attr("fill-opacity", 0.7)
          .text(d => d.data.value.toLocaleString());

      // clickイベントを設定
      d3.selectAll("path").on("click",function(data,idx,elem){
        var msg = "data:" + data.value + " idx:" + idx + " elem:" + elem + " d3.event.pageX: " + d3.event.pageX + " d3.mouse: " + d3.mouse(this) ;
        alert(msg);
      });

    </script>
  </body>
</html>

100

101

102

103

104

105

106

107

<!DOCTYPE html>

<html>

<head>

<title>d3 circle chart event</title>

.bar {

fill: steelblue;

}

.axis text {

font: 10px sans-serif;

color: #333;

}

#chart{

width:600px;

height:600px;

}

</style>

</head>

<body>

var data = [

{name: "A", value: 5000},

{name: "B", value: 2500},

{name: "C", value: 1250},

{name: "D", value: 1000},

{name: "E", value: 250},

];

var width = 500;

var height = 500

// dataの nameごとにグラフで使用する色を設定

var color = d3.scaleOrdinal()

.domain(data.map(d => d.name))

.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());

// 円グラフの内側・外側半径の設定

var arc = d3.arc()

.innerRadius(0)

.outerRadius(Math.min(width, height) / 2 - 1);

// 円グラフのラベル表示位置を設定

const radius = Math.min(width, height) / 2 * 0.57;

var arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);

// 円グラフ作成用の角度を計算

var arcs = d3.pie()

.sort(null) // data配列の順番でグラフを作成（未指定の場合は、valueの降順）

.value(function(d) { return d.value; })

(data);

// 円グラフ描画エリアを選択

var svg = d3.select("#chart")

.attr("text-anchor", "middle")

.style("font", "12px sans-serif")

// g要素を追加

const g = svg.append("g")

.attr("transform", `translate(${width / 2},${height / 2})`);

// g要素に各データのpath要素を追加

g.selectAll("path")

.data(arcs)

.enter().append("path")

.attr("fill", d => color(d.data.name))

.attr("stroke", "white")

.attr("d", arc)

.append("title")

.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);

// データごとにtext要素を設定

const text = g.selectAll("text")

.data(arcs)

.enter().append("text")

.attr("transform", d => `translate(${arcLabel.centroid(d)})`)

.attr("dy", "0.35em");

// text要素にデータ名を設定（dataのnameを設定）

text.append("tspan")

.attr("x", 0)

.attr("y", "-0.7em")

.style("font-weight", "bold")

.text(d => d.data.name);

// text要素にデータ名を設定（dataのvalueを設定）

text.filter( d => (d.endAngle - d.startAngle) > .7535).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("fill-opacity", 0.7)

.text(d => d.data.value.toLocaleString());

// clickイベントを設定

d3.selectAll("path").on("click",function(data,idx,elem){

var msg = "data:" + data.value + " idx:" + idx + " elem:" + elem + " d3.event.pageX: " + d3.event.pageX + " d3.mouse: " + d3.mouse(this) ;

alert(msg);

});

</script>

</body>

</html>

２．コードの詳細（ HTML ）

グラフを表示する場所を定義します。

<svg id="chart"></svg>

1	<svg id="chart"></svg>

３．コードの詳細（ JavaScript ）

円グラフの描画の詳細については、前回（#7 円グラフを表示する）に記載しています。
今回はクリックイベント処理に関連する部分のみ記載します。

３−１．クリックイベントを追加

イベント処理は、selection.on(typenames[, listener[, options]]) を使用して行います。
今回は次のように、全てのpath要素に対して、clickイベント発生時の処理を追加しています。

d3.selectAll("path").on("click",function(data,idx,elem){
  var msg = "data:" + data.value + " idx:" + idx + " elem:" + elem + " d3.event.pageX: " + d3.event.pageX + " d3.mouse: " + d3.mouse(this) ;
  alert(msg);
});

d3.selectAll("path").on("click",function(data,idx,elem){

var msg = "data:" + data.value + " idx:" + idx + " elem:" + elem + " d3.event.pageX: " + d3.event.pageX + " d3.mouse: " + d3.mouse(this) ;

alert(msg);

});

イベント発生時に実行する関数には引数が設定でき
第１引数：要素のデータ
第２引数：インデックス
第３引数：イベントが発生した要素（Node List）
が設定されます。

また、関数内では、d3.event や d3.mouse でイベントが発生した座標などの情報も取得することができます。

今回はクリックイベントを実装しましたが、typenames にはクリックイベント以外にも、ブラウザが対応している任意のDOMイベントを指定することができます。

設定できるイベントは、こちら（Event reference）を参照して下さい。

４．まとめ

円グラフにクリックイベントを追加しました。
selection.on()を使用すると、特定の要素に簡単にイベント処理を追加することができます。
ぜひ使用してみてください。