D3.js v5 入門｜#6 棒グラフにツールチップを表示する

d3.js（v5）で描画した棒グラフにツールチップを表示する方法について記載します。

実装すると、次のようにマウスオーバー時にツールチップを表示することができます。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>d3 bar chart tooltip</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/d3.min.js"></script>
    <script src="js/d3.tip.v4.js"></script>
    <style type="text/css">

      body {
        font: 10px sans-serif;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

      .bar {
        fill: skyblue;
      }

      .bar:hover {
        fill: steelblue ;
      }

      .d3-tip {
        padding: 10px;
        line-height: 1;
        font-weight: normal;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
        font-size: 13px;
      }

      .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 12px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
      }

      .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
      }

    </style>
  </head>
  <body>

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

    <script>

    var data = [
      {letter: "A", frequency: .1},
      {letter: "B", frequency: .2},
      {letter: "C", frequency: .3},
      {letter: "D", frequency: .4},
      {letter: "E", frequency: .5},
      {letter: "F", frequency: .6},
      {letter: "G", frequency: .7},
      {letter: "H", frequency: .8},
      {letter: "I", frequency: .9},
      {letter: "J", frequency: 1.0}
    ];

    /* 全体のマージンを設定 */
    var margin = {top: 40, right: 20, bottom: 30, left: 40},
        width = 480 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    /* X・Y軸の設定 */
    var x = d3.scaleBand()
        .rangeRound([0, width])
        .padding(0.1);

    var y = d3.scaleLinear()
        .range([height, 0]);

    var xAxis = d3.axisBottom(x);
    var yAxis = d3.axisLeft(y).tickFormat(d3.format(".0%"));

    /* tool tip の初期化 */
    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return "Frequency: <span>" + d.frequency + "</span>";
      })

    /* グラフ描画エリアの設定 */
    var svg = d3.select("#chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.call(tip);

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    /* X軸の描画 */
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    /* Y軸の描画 */
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(0)")
        .attr("x", 15)
        .attr("y", -25)
        .attr("dy", ".71em")
        .attr("fill","#000")
        .style("text-anchor", "end")
        .text("Frequency");

    /* 棒グラフの描画 */
    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.letter); })
        .attr("width", x.bandwidth())
        .attr("y", function(d) { return y(d.frequency); })
        .attr("height", function(d) { return height - y(d.frequency); })
        .on('mouseover', tip.show) /* tooltipを表示 */
        .on('mouseout', tip.hide)  /* tooltipを非表示 */

    function type(d) {
      d.frequency = +d.frequency;
      return d;
    }

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<!DOCTYPE html>

<html>

<head>

<title>d3 bar chart tooltip</title>

body {

font: 10px sans-serif;

}

.axis path,

.axis line {

fill: none;

stroke: #000;

shape-rendering: crispEdges;

}

.bar {

fill: skyblue;

}

.bar:hover {

fill: steelblue ;

}

.d3-tip {

padding: 10px;

line-height: 1;

font-weight: normal;

background: rgba(0, 0, 0, 0.8);

color: #fff;

border-radius: 2px;

font-size: 13px;

}

.d3-tip:after {

box-sizing: border-box;

display: inline;

font-size: 12px;

width: 100%;

line-height: 1;

color: rgba(0, 0, 0, 0.8);

content: "\25BC";

position: absolute;

text-align: center;

}

.d3-tip.n:after {

margin: -1px 0 0 0;

top: 100%;

left: 0;

}

</style>

</head>

<body>

var data = [

{letter: "A", frequency: .1},

{letter: "B", frequency: .2},

{letter: "C", frequency: .3},

{letter: "D", frequency: .4},

{letter: "E", frequency: .5},

{letter: "F", frequency: .6},

{letter: "G", frequency: .7},

{letter: "H", frequency: .8},

{letter: "I", frequency: .9},

{letter: "J", frequency: 1.0}

];

/* 全体のマージンを設定 */

var margin = {top: 40, right: 20, bottom: 30, left: 40},

width = 480 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

/* X・Y軸の設定 */

var x = d3.scaleBand()

.rangeRound([0, width])

.padding(0.1);

var y = d3.scaleLinear()

.range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y).tickFormat(d3.format(".0%"));

/* tool tip の初期化 */

var tip = d3.tip()

.attr('class', 'd3-tip')

.offset([-10, 0])

.html(function(d) {

return "Frequency: <span>" + d.frequency + "</span>";

})

/* グラフ描画エリアの設定 */

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

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);

x.domain(data.map(function(d) { return d.letter; }));

y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

/* X軸の描画 */

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

/* Y軸の描画 */

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("transform", "rotate(0)")

.attr("x", 15)

.attr("y", -25)

.attr("dy", ".71em")

.attr("fill","#000")

.style("text-anchor", "end")

.text("Frequency");

/* 棒グラフの描画 */

svg.selectAll(".bar")

.data(data)

.enter().append("rect")

.attr("class", "bar")

.attr("x", function(d) { return x(d.letter); })

.attr("width", x.bandwidth())

.attr("y", function(d) { return y(d.frequency); })

.attr("height", function(d) { return height - y(d.frequency); })

.on('mouseover', tip.show) /* tooltipを表示 */

.on('mouseout', tip.hide) /* tooltipを非表示 */

function type(d) {

d.frequency = +d.frequency;

return d;

}

</script>

</body>

</html>

２．コードの詳細（ HTML ）

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

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

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

３．コードの詳細（ JavaScript ）

３−１．ツールチップの初期化

ツールチップの表示には、d3.tip を使用します。
d3.tip を使用するにあたりclassの定義など、初期設定を行います。

/* tool tip の初期化 */
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "Frequency: <span>" + d.frequency + "</span>";
  })

/* tool tip の初期化 */

var tip = d3.tip()

.attr('class', 'd3-tip')

.offset([-10, 0])

.html(function(d) {

return "Frequency: <span>" + d.frequency + "</span>";

})

ポイントは、下記になります。

  .html(function(d) {
    return "Frequency: <span>" + d.frequency + "</span>";
  })

.html(function(d) {

return "Frequency: <span>" + d.frequency + "</span>";

})

ここでは、表示するツールチップの内容を設定します。
htmlで設定できるので、自由にスタイルを適用することができます。

３−２．ツールチップのイベントを設定

ツールチップを表示・非表示にするには、それぞれ関数を呼び出します。

show：ツールチップを表示
hide：ツールチップを非表示

Demoのコードでは、以下のように制御しています。
mouseover イベントでツールチップを表示（show）
mouseout イベントでツールチップを非表示（hide）

また、tip はツールチップを初期化する際に定義した、d3.tip() のオブジェクトが格納されている変数です。

/* 棒グラフの描画 */
svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.bandwidth())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); })
    .on('mouseover', tip.show) /* tooltipを表示 */
    .on('mouseout', tip.hide)  /* tooltipを非表示 */

/* 棒グラフの描画 */

svg.selectAll(".bar")

.data(data)

.enter().append("rect")

.attr("class", "bar")

.attr("x", function(d) { return x(d.letter); })

.attr("width", x.bandwidth())

.attr("y", function(d) { return y(d.frequency); })

.attr("height", function(d) { return height - y(d.frequency); })

.on('mouseover', tip.show) /* tooltipを表示 */

.on('mouseout', tip.hide) /* tooltipを非表示 */

４．まとめ

d3-tip を使用すると簡単にツールチップを表示することができます。
d3-tip の Git Hub と v5 で動作するソースコード（Demoで読み込んでいる、d3.tip.v4.js ）が記載されているページは以下となります。

d3-tip の Git Hub
d3.js v5 で動作する d3-tip のソースコード