alter.js BLOG
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。

【D3.js講座】 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>

表を作る

今回は試しに以下のような簡単な表をデータをもとに作成してみます。

リオ・オリンピック:国別メダル獲得数

countrymedal
USA121
UK67
China70
Russia56
Japan41
German42

元となるデータは以下のように定義します。

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の利点の一つとなります。

実際のサービスで確認!

アクセス解析ツール「アナトミー」ではwebページをタイルに置き換えて可視化しています。
各データを一つ一つタイル(gタグ)にしていますが、この処理にはfor文を使用していません。

次回は、D3.jsを使用したsvg描画をご紹介します。

D3.js講座

Page Top