2017年3月10日金曜日

D3 入門 ( div タグで棒グラフ表示 )

概要

D3 はあるデータを元にグラフやドキュメントを作成することができる JavaScript のライブラリです
日本語のチュートリアル を元に棒グラフを表示するところまでやってみたので紹介します

環境

  • CentOS 6.7 64bit
  • Apache httpd 2.2.15
  • D3 3.5.14

環境のインストール

D3 を実行できる環境を作成します
基本は js ファイルを一つ配置すれば OK です

  • mkdir -p /var/www/html/d3
  • cd /var/www/html/d3
  • wget http://d3js.org/d3.v3.js
  • touch index.html

あとは <head> タグ内で d3.v3.js をロードすれば OK です

<script type="text/javascript" src="d3.v3.js"></script>

棒グラフを作成できるサンプルコード

まずは今回トライした棒グラフを描画するソースコードの全体を以下に示します

  • cat /var/www/html/d3/index.html
<html lang="ja">
  <head>
    <title>D3 bar chart</title>
    <meta charset="utf-8">
    <style type="text/css">
      div.bar {
         display: inline-block;
         width: 20px;
         height: 75px;
         background-color: teal;
         margin-right: 2px;
      }
    </style>
    <script type="text/javascript" src="d3.v3.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      // d3.select("body").append("p").text("New paragraph");
      // var dataset = [ 5, 10, 15, 20, 25 ];
      var dataset = [ 15, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ];
      d3.select("body").selectAll("span")
        .data(dataset)
        .enter()
        .append("span")
        .html(function(d, i) { 
          console.log(d);
          if ((i + 1) == dataset.length) {
            return d + "<br/>";
          } else {
            return d + ",";
          }
        })
        .style("color", function(d) {
          if (d == 15) {
            return "red";
          } else {
            return "black";
          }
        });
      // console.log(d3.selectAll("p"))
      d3.select("body").selectAll("div")
        .data(dataset)
        .enter()
        .append("div")
        .attr("class", "bar")
        .style("height", function(d) {
          var barHeight = d * 5;
          return barHeight + "px";
        });
    </script>
  </body>
</html>

上記を配置してブラウザで確認すると以下のような棒グラフが表示されると思います
try_d3_bar_chart.png

ポイント

今回のサンプルでは大きく 2 つのことをしています
1 つは与えられた dataset の配列から、そのデータを CSV 形式で表示しています
もう一つは dataset の配列を順番に棒グラフとして表示しています

どちらも一番のポイントは

d3.select(“body”).selectAll(“span”)
.data(dataset)
.enter()
.append(“span”)

の部分です
詳しく何をしているかは公式をみたほうが絶対にいいので、ざっくり何をしているか説明すると

body 中に出現する span タグを取得して与えられた dataset ごとに span タグを適用して HTML を生成している、span タグがない場合は D3 が勝手に生成します

という感じなことをやってくれています
D3 の特徴的な書き方にメソッドチェインと呼ばれる書き方があって、その名の通りメソッドを次々とドットでつなぎ合わせることでコードを綺麗に完結に書くことができます

棒グラフを作成する方にも同じような流れがあると思います
棒グラフの方は span タグではなく div タグで dataset の各要素を囲うようにしています
そしてそのあとで再度、メソッドチェインしており .html やら .style やら .attr みたいなのが出てきていると思います
こいつらがそれぞれを何をしているかというと

  • .html ･･･ append された DOM 要素無いに HTML を記載する
  • .style ･･･ append された DOM 要素に style= 属性の値を付与する
  • .attr ･･･ append された DOM 要素に key, value 形式の属性情報を付与する

的なことをやってくれています
要するにどれも動的に DOM を生成しています ( 動的に HTML のコンテンツを作成している )
HTML はほとんど記述されていないけど、HTML が生成されているのはこいつらのおかげということです

更にちょっと複雑なこととして、これらの各メソッドは引数に無名関数 function を取ることができます ( たぶん JavaScript に書き慣れている方なら当たり前なことだと思いますが。。。)
function を引数に取ることで dataset に与えられた配列の個々のデータを function 内で参照することができます
つまり、まぁこれを使うとより複雑なことも実現できるようになるということです

最後に

ほぼチュートリアルをなぞっただけの紹介でした
グラフを書くだけのライブラリなら他にもいろいろあると思いますが D3 を使うとデータドリブンで綺麗にコードが書けるのが良い点なのかなと思いました
自分は JavaScript は初心者に近いレベルですが、そんな自分でもどんな処理をしているのかを直感的に理解することができたと感じました

そしてまだ、チュートリアルは続いています
ちょっと続きを読むと div でグラフは描画しないで svg を使うのが普通だよ
みたいなことが書いてあったので引き続き svg 版もやってみたいと思います
あとは他のグラフも描画してみたいなと思います

時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)