LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

08
--
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
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< 【D3.js】 バラ曲線 (Rose curve) を描画する | main | データの変化をSVG要素に反映する >>
ツールチップの作成方法
0
    JUGEMテーマ:JavaScript

    今回は、D3.jsを使ってグラフにツールチップ (Tooltip) を加える方法を見ていきます。

    ツールチップとは画面の表示要素の一種で、対象にマウスポインタを合わせたときに出現させる小さな領域のことを指します。データ可視化では、グラフ上のデータ点にマウスポインタを合わせたときに詳細な数値や注釈などを表示させる方法としてよく使われるテクニックです。このツールチップを D3.js で実現する方法はいくつかありますが、今回は div 要素を使って実現する方法を紹介します。それでは以前作成した散布図のプログラムをベースに、各データ点にマウスポインタを合わせるとデータの詳細がツールチップ上に表示されるように改修してみましょう。

    サンプルページ



    まず、html ファイルの <style>〜</style> タグ内に以下を追加します。
     

    <style>
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 80px;
        height: 30px;
        padding: 2px;
        font: 14px sans-serif;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
      }
    </style>


    次に、以前のプログラムにツールチップ表示用のコードを追加します。具体的には、47行目から59行目を追加しています。ツールチップ表示用のイベントハンドラとして mouseover を、またツールチップ非表示用のイベントハンドラとして mouseout を、それぞれ使っています。
    var dataSet = [];
    
    // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
    var margin = {top: 40, right: 40, bottom: 40, left: 100};
    var width = 800 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    
    // ツールチップ用の設定
    var div = d3.select("body")
      .append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
    
    d3.csv("./js/population.csv", function(error, dataSet){
      console.log(dataSet);
    
      // SVGの表示領域を生成
      var svg = d3.select("#MyGraph")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
        
      // X軸用のスケール関数を作成
      var xScale = d3.scale.linear()
        .domain([1920,2000])
        .range([0,width]);
    
      // Y軸用のスケール関数を作成
      var yScale = d3.scale.linear()
        .domain([0,130000])
        .range([height,0]);
    
      // 散布図を描画
      svg.selectAll("circle")
        .data(dataSet)
        .enter()
        .append("circle")
        .attr("r", 5)
        .attr("cx", function(d){
          return xScale(d.Year);
        })
        .attr("cy", function(d){
          return yScale(d.Population);
        })
        .attr("fill","rgba(0, 0, 255, 0.0)")
        .on("mouseover", function(d) { // マウスオーバー時にツールチップを表示
          div.transition()
            .duration(500)
            .style("opacity", 1.0);
          div.html(d.Year + "年
    " + d.Population + "千人") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { // マウスアウトするとツールチップを非表示 div.transition() .duration(500) .style("opacity", 0.0); }) .transition() // 最初に散布図をアニメーションで表示 .delay(function(d,i){ return i*20; }) .duration(500) .attr("fill","rgba(0, 0, 255, 1.0)"); // Y軸を描画 svg.append("g") .attr("class", "axis") .call(d3.svg .axis() .scale(yScale) .orient("left") ); // X軸を描画 svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg .axis() .scale(xScale) .orient("bottom") ); // 凡例 svg.append("g") .append("text") .attr("x", 20) .attr("y", 20) .text("[単位:千人]"); })

     
    このエントリーをはてなブックマークに追加
    | D3.js | 23:47 | comments(0) | - | - |
    スポンサーリンク