【d3.js】ツールチップを追加する方法

tooltip

グラフにツールチップを追加する方法をご紹介します。

散布図の丸にCSSでツールチップを追加してみます。

HTML/JavaScriptサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg{
  font: 10px sans-serif;
  background-color: #eee;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: #333;
}

.cirStyle {
  r: 8;
  fill: #BF5E5E;
  stroke-width: 3px;
  stroke: #73412F;
  opacity: 0.7;
}

.cirStyle:hover {
  r: 12;
  fill: #F2B705;
  stroke: #F29F05;
}

.tooltip {
  position: absolute;
  width: auto;
  height: auto;
  padding: 4px;
  font: 10px sans-serif;
  color: #fff;
  background: #333;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  visibility: hidden;
}

</style>
<script src="d3.min.js"></script>
</head>
<body>
<script>
// 1. データの準備
var dataset = [
    [1, 4],
    [2, 6],
    [3, 11],
    [4, 18],
    [5, 22],
    [6, 27],
    [7, 29],
    [8, 29],
    [9, 25],
    [10, 18],
    [11, 13],
    [12, 7],
];

var width = 800; // グラフの横幅
var height = 600; // グラフの縦幅
var margin = { "top": 40, "bottom": 80, "right": 40, "left": 80 };

// tooltip用div要素追加
var tooltip = d3.select("body").append("div").attr("class", "tooltip");

// SVGの設定
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

// x,y軸スケールの設定
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([margin.left, width - margin.right]);

var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([height - margin.bottom, margin.top]);

// 軸の表示
var axisx = d3.axisBottom(xScale).ticks(5);
var axisy = d3.axisLeft(yScale).ticks(5);

svg.append("g")
  .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")
  .call(axisx)
  .append("text")
  .attr("fill", "black")
  .attr("x", (width - margin.left - margin.right) / 2 + margin.left)
  .attr("y", 35)
  .attr("text-anchor", "middle")
  .attr("font-size", "10pt")
  .attr("font-weight", "middle")
  .text("月");

svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + 0 + ")")
  .call(axisy)
  .append("text")
  .attr("fill", "black")
  .attr("text-anchor", "middle")
  .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
  .attr("y", -35)
  .attr("transform", "rotate(-90)")
  .attr("font-weight", "middle")
  .attr("font-size", "10pt")
  .text("最高気温");

// ラインの表示
svg.append("g")
   .selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 4)
   .attr("id", function(d, i) { return "id-" + i; })
   .classed("cirStyle",true)
   // タッチイベント設定
   .on("mouseover", function(d) {
     tooltip
     .style("visibility", "visible")
     .html(d[0] + "月" + "<br>最高気温: " + d[1] + "℃");
   })
   .on("mousemove", function(d) {
     tooltip
     .style("top", (d3.event.pageY - 20) + "px")
     .style("left", (d3.event.pageX + 10) + "px");
   })
   .on("mouseout", function(d) {
     tooltip.style("visibility", "hidden");
    })
</script>
</body>
</html>

CSSの設定方法

ツールチップのスタイルをCSSのクラス名で指定しておきます。

visibility: hidden; を指定し最初は見えないようにしておきます。

.tooltip {
  position: absolute;
  width: auto;
  height: auto;
  padding: 4px;
  font: 10px sans-serif;
  color: #fff;
  background: #333;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  visibility: hidden;
}

JavaScriptの設定

ツールチップ用の要素を追加しておきます。

// ツールチップ用div要素追加
var tooltip = d3.select("body").append("div").attr("class", "tooltip");

サークルを表示する際にタップイベントとツールチップの表示を設定しておきます。

// サークルの表示
svg.append("g")
   .selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 4)
   .attr("id", function(d, i) { return "id-" + i; })
   .classed("cirStyle",true)
   // タッチイベント設定
   .on("mouseover", function(d) {
     tooltip
     .style("visibility", "visible")
     .html(d[0] + "月" + "<br>最高気温: " + d[1] + "℃");
   })
   .on("mousemove", function(d) {
     tooltip
     .style("top", (d3.event.pageY - 20) + "px")
     .style("left", (d3.event.pageX + 10) + "px");
   })
   .on("mouseout", function(d) {
     tooltip.style("visibility", "hidden");
    })

タッチイベントのハンドリング

on(eventType, listener)
eventTypeのイベント発生したら, listenerを実施。

.on()イベントタイプ

mousedownマウスボタンがクリックされた
mouseupマウスボタンが離れた
mouseoverマウスオーバーされた
mouseoutマウスオーバーが外れた
touchstartタッチが開始された
touchendタッチが終了した
clickクリックされた

まとめ

以上、d3.jsでCSSでスタイルを指定するサンプルでした。

関連情報

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA