【D3.js講座】 D3.jsとは?
- 2016.08.31
- JavaScript
- D3.js
アナトミーでは、webサイトの情報を俯瞰するというコンセプトで開発しており、多量のデータをブラウザの1画面に収める必要がありました。
そこで利用したのが D3.js です。
D3.jsはデータの可視化のためのJavaScriptライブラリです。(公式サイト:https://d3js.org/)
アナトミーの全景ビューのタイル、ツリー、折れ線グラフなどをこの D3.jsを使って表現しています。
このD3.jsを例を挙げつつ紹介します。
準備
D3.jsを使用するにあたってまずはjsファイルを用意しなければなりません。
以下のようにjsファイルを取得してください。(または、公式サイトからダウンロード)
<script src="https://d3js.org/d3.v5.min.js"></script>
表を作る
今回は試しに以下のような簡単な表をデータをもとに作成してみます。
リオ・オリンピック:国別メダル獲得数
country | medal |
---|---|
USA | 121 |
UK | 67 |
China | 70 |
Russia | 56 |
Japan | 41 |
German | 42 |
元となるデータは以下のように定義します。
var data = [
{"country":"USA", "medal":121},
{"country":"UK", "medal":67},
{"country":"China", "medal":70},
{"country":"Russia", "medal":56},
{"country":"Japan", "medal":41},
{"country":"German", "medal":42}
];
そして、ひな形となるhtmlをあらかじめ用意しておきます。
<table>
<thead>
<tr>
<th>country</th>
<th>medal</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
このtbodyに対してtrタグとtdタグを追加し、表を作成します。
D3.js
D3.jsを使い表を作成するとこのようなコードになります。
var d3tr = d3.select("table tbody").selectAll(".record").data(data).enter().append("tr");
d3tr.append("td").text(function(d){
return d.country;
});
d3tr.append("td").text(function(d){
return d.medal;
});
ここで確認してもらいたいのはfor文を使用していないということです。
d3trに対し、append(“td”)を一度使用するだけで、データがセットされたすべてのtr要素に対して要素の追加が行われます。
また、tdタグに使用しているtext関数の引き数function(d)のdには、dataの各要素の値が渡されます。
jQuery
比較として、同じ処理をjQueryで書いてみました。
こちらではfor文を使用しています。
var $tbody = $("table > tbody");
for (var i = 0; i < data.length; i++){
var $tr = $("<tr />");
var $td1 = $("<td />");
var $td2 = $("<td />");
$tr.append($td1.text(data[i].country));
$tr.append($td2.text(data[i].medal));
$tbody.append($tr);
}
データを処理する場合、for文を使用する場面が多く出てくるかと思います。
「データの配列の要素数」と「DOM上の要素の数」を開発者が丁寧に管理する必要がないというのが、D3.jsの利点の一つとなります。
実際のサービスで確認!
アクセス解析&SEO分析ツール「アナトミー」ではwebページをタイルに置き換えて可視化しています。
各データを一つ一つタイル(gタグ)にしていますが、この処理にはfor文を使用していません。
次回は、D3.jsを使用したsvg描画をご紹介します。