D3を使用した対話型棒グラフ

Question

D3に線グラフをプロットしようとしていますが、x変数は（標準データ形式ではなく）2012-13のような会計年度です。結果として、x値を文字列として保持することを検討しています。

私は、私がデータを読み取るその後ライン

var valueline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

を定義するための次のコードを持っており、チャートに行を追加します。

d3.csv("data.csv", function(error, data) { 
    data.forEach(function(d) { 
     d.date = d.date); 
     d.close = +d.close; 
    }); 

    ... 

    // Add the valueline path. 
    svg.append("path") 
     .attr("class", "line") 
      .attr("d", valueline(data)); 

     ... 

     // add axes etc 

}); 

これが動作していないと私は」次のエラーが発生しました：

Error: <path> attribute d: Expected number, "MNaN,190.81307074…". 

これは、折れ線グラフが日付または数字を必ず必要とすることを意味しますか？次のように

データは次のとおりです。

date,close 
2012-13,58.13 
2013-14,53.98 
2014-15,67.00 
2015-16,89.70 
2016-17,99.00 

Answer 1

あなたが表示していない重要なビットは、あなたのxスケールを定義する方法です。その行はあなたのデータが何であるか気にしません。あなたのx値がNaNになっているので、何かがあなたのスケールに間違っています。

時間タイプのスケール（https://github.com/d3/d3-scale#scaleTime）を使用している場合は、有効な日時、IE、UNIXのタイムスタンプまたは日付オブジェクトでなければなりません。 d3.timeParse（https://github.com/d3/d3-time-format#timeParse）を使用すると、文字列の日付を変換できます。

あなたは、あなたが文字列を使用することができ、そのようscalePoint（https://github.com/d3/d3-scale#scalePoint）として、順序型スケールを使用しているが、ドメインのためにすべてのあなたの日付文字列を渡す必要があります場合は、次の場合

x.domain(data.map(function(d) { return d.date; }));

そこには隙間があり、それも順序型のスケールには反映されません。