BETA

tooltipにグラフを描写する(d3.js)

投稿日:2019-05-27
最終更新:2019-06-01

はじめに

d3のバージョンはv4です。バージョンによって書き方が違うのでご注意ください。
グラフのデータはこちらを使用させていただきました。

完成品

前回作成したメーターっぽいグラフに拡張する形でtooltipを実装しました。
グラフと同じ情報を円グラフで出力しています。

コード

記事が長くなるのがあまり好きではないため、コードの作成手順と説明ははてなブログに載せています(こちら)。

tooltip_ex.js

//tooltip_ex.js  
//tooltipやら円グラフの色やらの設定  
var width = 200,  
    height = 200,  
    color = ["#7cfc00", "#333333"];  

//tooltipの設定  
var tooltip_ex = d3.select('#tooltip_ex')  
    .style("position", "absolute")  
    .style("padding", "3px")  
    .style("background", "rgba(0,0,0,0.8)")  
    .style("border", "3px")  
    .style("opacity", "0")  
    .style("border-radius", "8px");  


//tooltipに寄生するものを書く(今回は円グラフ)--------------------------------------  
//半径を求めておく  
var radius = Math.min(width, height) / 2 - 20;  

//グラフ全体の設定。中央に移動している  
var chart = tooltip_ex.append("svg")  
    .attr("width",width).attr("height",height)  
    .append("g")  
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  

//円グラフ用のデータを生成する物を作成  
var pie = d3.pie().value(function (d) {  
    return d;  
}).sort(null);  

//円グラフの描写。一回適当な値を入れて描写しておく。  
chart.selectAll(".arc").data(pie([10, 10])).enter()  
    .append("path").attr("class", "arc")  
    .attr("fill", function (d, i) {  
        return color[i];  
    }).attr("d", d3.arc().outerRadius(radius).innerRadius(radius * 0.6))  
    .attr("stroke", "white");  

//円グラフの中央に書くテキスト  
var text = chart.append("text")  
    .style("text-anchor", "middle")  
    .attr("fill", color[0]).style("font-weight","600");  

/**  
 * 円グラフのデータを更新する  
 * @param {float} data 0~100までの値   
 */  
function set_data(data) {  
    //円グラフの値の更新。  
    chart.selectAll(".arc").data(pie([data, 100 - data]))  
        .attr("d", d3.arc().outerRadius(radius).innerRadius(radius * 0.6));  

    //最初の円だけ大きくする  
    chart.select(".arc")  
        .attr("d", d3.arc().outerRadius(radius * 1.1).innerRadius(radius * 0.5));  

    //テキストも更新  
    text.text(data + "%");  
}  

イベントの追加

 上はtooltipのモデルを作成したに過ぎないので、このtooltipを呼び出す処理を追加する。今回はグラフへカーソルが当たったときに呼び出したいので、作ったグラフのrectの生成の後に以下の処理を追加する。

/*meters.append("rect")  
    .attr("transform", function (d) {  
        return "translate(" + x(d.name) + ", " + (height - i * (height / meternum) - height / (meternum + 13)) + ")";  
    })  
    .attr("height", height / (meternum + 13))  
    .attr("width", x.bandwidth())  
    .attr("rx", 4)  
    .attr("stroke", "rgba(0,0,0,0.8)")  
    .attr("stroke-width", 2)  
    .attr("fill", function (d) {  
        if (d.value <= (i / meternum) * 100) {  
            return "black"  
        }  
        else {  
            return d3.interpolateWarm((i / meternum) * 1.3)  
        }  
    })  
*/ //以下を追加  
    .on("mouseover", function (d) {  
        set_data(d.value);  
        tooltip_ex.style("opacity", "0.99"); //tooltipを表示  
    })  
    .on("mousemove", function () {  
        tooltip_ex.style("left", d3.event.pageX + "px")  
            .style("top", (d3.event.pageY - 230) + "px");  
    })  
    .on("mouseout", function () {  
        tooltip_ex.style("opacity", "0"); //tooltipを非表示  
    });

htmlにdivを作成するのもお忘れなく。(ファイルのincludeも)

<div id="tooltip_ex" class="tooltip"></div>  
<script type="text/javascript" src='tooltip_ex.js'></script>  

まとめ

tooltipでグラフを実際に使っているのをあまり見ないが、やってみると案外かっこいいし見やすいと思いました。
今回は円グラフだったけれど、他のグラフやグラフ以外も考えてみると楽しいかもしれないですね。(/・ω・)/

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@syakooのブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!