nvd3.jsの線グラフのコードを上から見ていく

nvd3.jsの記事を前回書きましたが、表示させると下記のグラフができます。
グラフの中とコードを見ながらコードがわかるようになりたいと思います。

■出てきたグラフ

まずはメインのコードになります。

    nv.addGraph(function() {
      var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
//                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(true)        //Show the y-axis
                .showXAxis(true)        //Show the x-axis
                 ;

    chart.xAxis     //Chart x-axis settings
      .axisLabel('Time (ms)')
      .tickFormat(d3.format(',r'));

    chart.yAxis     //Chart y-axis settings
      .axisLabel('Voltage (v)')
      .tickFormat(d3.format('.02f'));

  d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.   
      .datum(myData)         //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
   });

■グラフのタイプの選択
まずは変数chartを作成しています。
nv.models.lineChart() で線グラフを選択していることがわかります。
後続のメソッドチェーンはプロパティを指定しています。

.marginは余白を設定しています。

.useInteractiveGuideLineは、ドキュメントを直訳してもよくわからなかったのですが、
trueとfalseでそれぞれ比べると、trueの場合にポインタをグラフ上にマウスオーバーをすると、
今回だと3本それぞれの値が表示されます。
falseの場合は、選択した線については表示されますが、他の2本についての情報は表示されませんでした。

.showLegendは凡例を表示しています。

.showYAxis, .showXAxis はX軸とY軸をそれぞれ表示するように設定しています。

続いて、chart.xAxis, chart.yAxisではX軸とY軸の設定をしています。xxxxLabelはそれぞれラベルを記載しています。

.tickFormat(d3.format(',r'))は何かです。
.tickFormatで軸の幅を決めています。d3-formatで記載しており、
d3.format(',r')は、小数点以下を四捨五入した1000までの整数？で←英語がよくわからなかったのでごめんなさい。
d3.format('0.2f')は、小数点2桁までの固定小数点で記載しています。

画面への描画はjQueryのように範囲とデータを指定して記載します。
d3.select('#chart svg') // IDがchartの中にあるsvgタグを指定
　.datum(myData) // 描画するデータを指定
　.call(chart); // chartを描画しています。

また下記一文でウィンドウのサイズ変更した際に一緒にグラフも変更されるようにしています。
nv.util.windowResize(function(){ chart.update()});

ここまでがざっとした使い方と思います。

あとは描画するデータの準備です。
JSONフォーマットのデータを描画してくれるようです。
今回のサンプルだと下記フォーマットなので、このフォーマットのJSONオブジェクトを作れれば問題なさそうです。

{
 values: Array, {x: x軸の値, y;y軸の値}
 key: '凡例の名前',
 color: '線の色',
 area: true // 面に色を付けたい場合にtrueにする。
}

今回のサンプルだとArrayは10個ほどですが、下記値がSine Waveに入っていました。

Array(100)
 0: {x: 0, y: 0, series: 0}
 1: {x: 1, y: 0.09983341664682815, series: 0}
 2: {x: 2, y: 0.19866933079506122, series: 0}
 3: {x: 3, y: 0.29552020666133955, series: 0}
 4: {x: 4, y: 0.3894183423086505, series: 0}
 5: {x: 5, y: 0.479425538604203, series: 0}
 6: {x: 6, y: 0.5646424733950354, series: 0}
 7: {x: 7, y: 0.644217687237691, series: 0}
 8: {x: 8, y: 0.7173560908995228, series: 0}
 9: {x: 9, y: 0.7833269096274834, series: 0}
 10: {x: 10, y: 0.8414709848078965, series: 0}
 ・・・99まで続く

以上。