12/16/2013

d3.jsとAngular JS

だいぶ遅れてすみません。d3.js Advent Calendar 2013の16日目です。
d3は高機能な描画機能が売りの一つだと思いますが、一方で柔軟な表現が出来るがために、シンプルなチャートを描画するだけでも多くのコード量が必要になりますし、コードそのものも難解なものになりがちです。そこで記述を完結にするためにd3をベースにしたRickshaw、C3.jsといったチャート用のライブラリが増えてきています。
Rickshaw
http://code.shutterstock.com/rickshaw/
Rickshawでのチャート
C3.js
http://c3js.org/

 上記は下記のようなJSの記述でチャートを生成しますが、
  1. var chart = c3.generate({
  2.     data: {
  3.         rows: [
  4.             ['data1', 'data2', 'data3'],
  5.             [90, 120, 300],
  6.             [40, 160, 240],
  7.             [50, 200, 290],
  8.             [120, 160, 230],
  9.             [80, 130, 300],
  10.             [90, 220, 320],
  11.         ]
  12.     }
  13. });
一方でdangle.js
http://www.fullscale.co/dangle/
や
Radian
http://openbrainsrc.github.io/Radian/index.html
はAngular JSのDirectiveを用いて、htmlを記述することで複雑なチャートも簡潔に記述ができるようになっています。Radianでの記述は以下のようになります。
  1. <plot height=200 aspect=2 stroke-width=2
  2.       x="[[seq(0,4*PI,101)]]"
  3.       axis-x-label="Time"
  4.       axis-y-label="sin(x) / cos(x)">
  5.   <lines y="[[sin(x)]]" stroke="red"></lines>
  6.   <lines y="[[cos(x)]]" stroke="blue"></lines>
  7. </plot>
Radianのチャート
個人的にd3とAngularのDirectiveは相性が良いと思っています。自分のプロジェクトでもうまく使ってみたいなと思っていたところ、Angular.jsのMeetupでd3とAngularを扱った回があり、そのサンプルがちょうど良い分量だったので今回はそれを解説をしたいと思います。
こちらです。
https://github.com/lithiumtech/angular_and_d3
Step1ではAngularを使わずにゲージの表示を行っていますが、ステップを進む毎にAngularのintegrationが行われています。またゲージを表示するClassは既に作られており、それは改変せずにAngularからどのように呼び出すか？というチュートリアルになっています。（上記の細かいスッテップは省きます。）

1-1: Angularを使わないhtml 
  1. <body onload="initialize()">
  2. <div>
  3.      <span id="memoryGaugeContainer"></span>
  4.      <span id="cpuGaugeContainer"></span>
  5.      <span id="networkGaugeContainer"></span>
  6. </div>
  7. </body>
1-2: Angularを使うhtml 
  1. <body ng-controller="MyController">
  2. <div>
  3.     <gauge min="-50" max="50" value="values.p" label="Petrol"></gauge>
  4.     <gauge min="-50" max="50" value="values.o" label="Oil"></gauge>
  5.     <gauge min="-50" max="50" value="values.c" label="Coolant"></gauge>
  6. </div>
<gauge>というタグを定義し、min、maxなどの独自のattributeを設定する。またbodyタグに ng-controller="MyController"属性を付与し、body以下をMyControllerのscopeとする。

2-1: Angularを使わないJS
  1. var gauges = [];
  3. function createGauge(name, label, min, max) {
  4.   var config = {
  5.     size: 250,
  6.     label: label,
  7.     min: undefined != min ? min : 0,
  8.     max: undefined != max ? max : 100,
  9.     minorTicks: 5
  10.   }
  12.   var range = config.max - config.min;
  13.   config.yellowZones = [{
  14.     from: config.min + range * 0.75,
  15.     to: config.min + range * 0.9
  16.   }];
  17.   config.redZones = [{
  18.     from: config.min + range * 0.9,
  19.     to: config.max
  20.   }];
  22.   gauges[name] = new Gauge(d3.select("#" + name + "GaugeContainer")[0][0], config);
  23.   gauges[name].render();
  24. }
  26. function createGauges() {
  27.   createGauge("memory", "Memory");
  28.   createGauge("cpu", "CPU");
  29.   createGauge("network", "Network");
  30. }
  32. function updateGauges() {
  33.   for (var key in gauges) {
  34.     var value = getRandomValue(gauges[key])
  35.     gauges[key].redraw(value);
  36.   }
  37. }
  39. function getRandomValue(gauge) {
  40.   var overflow = 0; //10;
  41.   return gauge.config.min - overflow + (gauge.config.max - gauge.config.min + overflow * 2) * Math.random();
  42. }
  44. function initialize() {
  45.   createGauges();
  46.   setInterval(updateGauges, 5000);
  47. } 
2-2: Angularを使うJS 
  1. angular.module('components', []).directive('gauge', function() {
  2.   //componentsモジュールにgaugeディレクティブを追加します
  3.   return {
  4.     restrict: 'E', //Elementとしてdirectiveを使用する
  5.     replace: true, //Eを使用するときは、HTML として不適当な要素名が記述される可能せがあるのでtrueが望ましい、trueにするとgauseタグが置き換わる
  6.     scope: {
  7.       label: "@", // interpolate（値、string）
  8.       min: "=", // data bind
  9.       max: "=", // data bind
  10.       value: "=" // data bind
  11.     },
  12.     link: function(scope, element, attrs, ngModelCtrl) {
  13.       //linkでは、scopeにあるモデルの変更を検知、またイベントに応じた処理を記述して、DOM や controller とのやり取りを行う
  14.       //以下のコードは基本的にAngularを使わないJSと同じ
  15.       var config = {
  16.         size: 120,
  17.         label: attrs.label,
  18.         min: undefined != scope.min ? scope.min : 0,
  19.         max: undefined != scope.max ? scope.max : 100,
  20.         minorTicks: 5
  21.       };
  22.       var range = config.max - config.min;
  23.       config.yellowZones = [{
  24.         from: config.min + range * 0.75,
  25.         to: config.min + range * 0.9
  26.       }];
  27.       config.redZones = [{
  28.         from: config.min + range * 0.9,
  29.         to: config.max
  30.       }];
  32.       scope.gauge = new Gauge(element[0], config);
  33.       scope.gauge.render();
  34.       scope.gauge.redraw(scope.value);
  35.       //scopeに変更があったときに実行される処理
  36.       scope.$watch('value', function() {
  37.         if (scope.gauge)
  38.           scope.gauge.redraw(scope.value);
  39.       });
  40.     }
  41.   }
  42. });
angular.moduleでgaugeディレクティブを追加します。returnオブジェクトの中にいくつかのパラメータを指定します。linkブロックはscopeにあるモデルの変更を検知、またイベントに応じた処理を記述して、DOM や controller とのやり取りを行います。

 3: Jsdo.itのサンプル
このようにDirectiveを使うことで、html構文としてD3で作られる図を宣言することが出来、ロジックと図の宣言を明快に分けることができます。
コードの可読性も高まり、また再利用性も高まるのではないでしょうか？

 参考：
AngularJS Directive なんてこわくない（その１）
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

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