NVD3.js - weblog.sy

綺麗なチャートを表示するのにnvd3.jsを使ってるんだけど、ハマリどころが多いのでメモ。

追記> こちらにちゃんとしたdocumentがありました。 Nvd3 - reusable charts for D3.js

データは各シリーズでx値が一致して抜けがないように。抜けは0やnullで補完する。x値の順序も同じようにソートしておく。
chartのx,yメソッドで値のスケーリングや演算ができるが、おかしくなることも多いので、演算済みのデータを渡すのが吉。
```
chart.x(function(d) { return d['x'] / 1000 })
```
日付はUnix tampstampをm secでわたす。javascriptで以下のように希望のフォーマットに変換する。
```
chart.xAxis.tickFormat(
  function(d) {return d3.time.format('%Y-%m-%d')(new Date(d));});
```
色を変えたいときはjavascriptでcolorをインジェクトしたが、元データに埋め込んでも可。
```
data[0]['color'] = '#00cc00';
```
グラフのサイズはsvgタグのサイズで指定(slimつかってます)
```
div#qty 
  svg style="height:300px; width:100%;"
```
要望: line chartで、ぬけてるポイントは飛ばして線をつなげてほしい。

slimのテンプレを貼っておく

  doctype html
  html
    head
      meta charset="utf-8"
      title NVD3.js template
      link href="nv.d3.css" rel="stylesheet"
      script src="d3.min.js"
      script src="nv.d3.min.js"
      javascript:
        d3.json('data.json', function(data) {
          nv.addGraph(function() {
            var chart = nv.models.multiBarChart()
              .rotateLabels(-45)
              .margin({top: 30, right: 100, bottom: 100, left: 100});
            chart.multibar.stacked(true);
            chart.xAxis
                 .tickFormat(function(d) {
                   return d3.time.format('%Y-%m-%d')(new Date(d));});
            chart.yAxis
              .tickFormat(d3.format(',d'))
              .axisLabel('Number');
            data[0]['color'] = '#00cc00';
            data[1]['color'] = '#ffcc00';
            data[2]['color'] = '#ff9900';
            data[3]['color'] = '#ff3300';
            d3.select('#chart svg')
                .datum(data)
                .call(chart);
            nv.utils.windowResize(chart.update);
            return chart;
          });
        });
    body
      span
        h2 style="text-align:center;" Test chart
      div#chart
        svg style="height:300px; width:100%;"