2017年3月10日金曜日

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

概要

前回 は D3 を使って <div> タグで棒グラフを描画しました
今回は <svg> タグを使って同じグラフを描画してみたので紹介します
D3 的には <div> タグじゃなくて <svg> タグを使う方が正解みたいです

環境

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

SVG タグで棒グラフを作成

SVG タグで作成した棒グラフのソースは以下の通りです

  • cat /var/www/html/d3/index.html
<html lang="ja">
  <head>
    <title>D3 bar chart</title>
    <meta charset="utf-8">
    <style type="text/css">
      .test_svg {
        stroke: orange;
        stroke-width: 0;
      }
    </style>
    <script type="text/javascript" src="d3.v3.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      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 ];
      // svg で rect を使って棒グラフを描画する
      var w_bar = 20;
      var space = 2;
      var ratio = 5;
      var w = 500;
      var h = Math.max.apply(null, dataset) * ratio;
      var svg = d3.select("body").append("svg");
      svg.attr("width", (dataset.length * w_bar) + (dataset.length * space));
      svg.attr("height", h);
      var circles = svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
      circles.attr("x", function(d, i) {
        return (i * w_bar) + (i * space);
      })
      .attr("y", function(d) {
        return h - (d * ratio);
      })
      .attr("width", w_bar)
      .attr("height", function(d) {
        return d * ratio;
      })
      .attr("class", "test_svg");
    </script>
  </body>
</html>

ブラウザで確認してみると以下のような棒グラフが表示されると思います
d3_bar_chart_svg.png

ポイント

SVG の基本的な仕組みや概念についての説明は省略します

まず

var svg = d3.select("body").append("svg");

で SVG タグを追加します
直後に SVG 全体の高さと幅を設定します

svg.attr("width", (dataset.length * w_bar) + (dataset.length * space));
svg.attr("height", h);

SVG タグを作成したらそのタグ内に dataset 分の rect を作成していきます

var circles = svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")

これで棒グラフの元となる四角形を描画しています
あとは、この棒グラフの見栄えを整形していきます
例えば

circles.attr("x", function(d, i) {
  return (i * w_bar) + (i * space);
})

は rect タブに「x」という属性を追加しています
これは四角形を描画する X 座標を決定する属性です
描画する棒グラフごとに X 座標を右にずらす必要があるので、w_bar と space 変数を使って少しずつずらしています

あとは同じように「y」「width」「height」属性を決定します
最後に class を追加していますが、これは今回特に意味はありません
必要であれば冒頭で定義しているスタイルを変更していただければと思います

最後に

SVG 版の棒グラフ描画を紹介しました
描画速度のベンチマークを取ったり複雑な図形の描画まで行っていないので div と比べて何が良いのか数値的にはわかりませんが、SVG 自体使えて損はない機能だと思います
単純に丸や線を SVG で描けるようになるだけでも div よりは優位だと思います

次回は他の種類のグラフ (たぶん折れ線グラフ) 描画に挑戦してみたいと思います

時刻:
ラベル:

0 件のコメント:

コメントを投稿

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