D3.js 棒グラフ(bar chart)でのtooltipの追加方法
棒グラフにtooltipを付ける方法を紹介します。D3 v4/v5にはtooltip用の関数が用意されていないのですが、CSSを使って簡単に実装できます。
サンプルデモ – バーをタップ、もしくはカーソルを合わせてください
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script src="https://d3js.org/d3.v5.min.js"></script> <style> /* CSS設定 */ .tooltip { position: absolute; text-align: center; width: auto; height: auto; padding: 5px; font: 12px; background: white; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); visibility: hidden; } .bar:hover { fill: Brown; } </style> </head> <body> <script> var dataset = [ { "name": "A", "value": 5 }, { "name": "B", "value": 6 }, { "name": "C", "value": 8 }, { "name": "D", "value": 1 }, { "name": "E", "value": 2 }, { "name": "F", "value": 6 }, { "name": "G", "value": 8 }, { "name": "H", "value": 6 }, { "name": "I", "value": 10 }, { "name": "J", "value": 9 } ] var width = 600; var height = 400; var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); var padding = 30; // 2. tooltip用div要素追加 var tooltip = d3.select("body").append("div").attr("class", "tooltip"); var xScale = d3.scaleBand().rangeRound([padding, width - padding]).padding(0.1) .domain(dataset.map(function(d) { return d.name; })); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.value; })]) .range([height - padding, padding]); var axisx = d3.axisBottom(xScale); var axisy = d3.axisLeft(yScale); svg.append("g") .attr("transform", "translate(" + 0 + "," + (height - padding) + ")") .call(axisx); svg.append("g") .attr("transform", "translate(" + padding + "," + 0 + ")") .call(axisy); svg.append("g") .selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return xScale(d.name); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return height - padding - yScale(d.value); }) .attr("fill", "steelblue") .attr("class", "bar") // 3. マウス&タッチイベント設定 .on("mouseover", function(d) { tooltip .style("visibility", "visible") .html("name : " + d.name + "<br>value : " + d.value); }) .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> |
解説
基本的な棒グラフの作り方はこちらを参照ください。
1. CSS設定
tooltipとホバー時のバーのスタイルを設定します。visibility: hidden;としておくことで、最初はtooltipを隠しておきます。
2. tooltip用div要素追加
tooltip用にdiv要素を追加します。
3. マウス&タッチイベント設定
on()で”mouseover”、”mousemove”、”mouseout”イベントを設定します。タッチイベントにも対応しており、バーをタッチすると”mouseover”、”mousemove”に設定した関数が呼び出されます。”mousemove”ではD3でマウス位置を取得するd3.event.pageX、d3.event.pageYを使ってtooltipの位置を変更しています。 “mouseout”時に”visibility”: “hidden”としてtooltipを隠します。タッチ操作の場合tooltipが表示されたままになります。
まとめ
基本的なCSS操作なので、他のグラフにも応用がききます。