layout - D3.jsで積み上げ移動折れ線グラフのベースラインを計算するにはどうすればよいですか?

Question

移動ストリーム グラフをレンダリングしようとしています。単純な折れ線グラフを動かしていますが、スタックが私を悩ませています。具体的には、ベースラインは y0=height に設定されています。ここで、height はプロットの高さです。以下のコードは y0 を組み込む試みですが、解析エラーが発生しています。次の形式のデータ:

data = [
           {
               "name": "foo"
               "values": [ {time: 1, value: 23}, {time: 2, value: 32}, ... ]
           },
           {
               "name": "bar"
               "values": [ {time: 1, value: 33}, {time: 2, value: 62}, ... ]
           },
           {
               "name": "baz"
               "values": [ {time: 1, value: 13}, {time: 2, value: 2}, ... ]
           },
           ...
       ];

エリア ジェネレータは次のようになります。

var area = d3.svg.area()
    .interpolate("linear")
    .x(function(d) { return x(d.time); })
    .y0(function(d) { return height - y(d.y0); })
    .y1(function(d) { return y(d.value + d.y0); });

スタック レイアウトは次のようになります。

var stack = d3.layout.stack()
    .values(function(d) { return d.values; })
    .x(function(d) { return d.time; })
    .y(function(d) { return d.value; })
    .out(function(d, y0, y) {
        d.y0 = y0;
        d.value = d.value;
    });

次に、私のパスを生成するには：

var path = svg.append("g")
    .selectAll("path")
    .data(stack(data))
  .enter().append("path")
    .attr("d", function(d) { return line(d.values); });

私はもともとデータに値 0 を入力しているので、最初は何も表示されるとは思っていません。そして、パスがレンダリングされて動作するようです。

問題は更新時に発生します。パスには解析エラーがあり、パス生成のさまざまなスパートで NaN にヒットします。アクセサの 1 つ y0、y、または x が定義されていないためだと思います。

d="M328.60871678767865,104...{normal}...L395.02613982034944,NaNL395.02613982034944,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401 .6597510373444,NaNL401.6597510373444,NaNL395.02613982034944,NaNL395.02613982034944,NaNL395.02613982034944,NaNL395.02613982034944,NaNL388.3857526981277,NaNL388.3857526981277,NaNL388.3857526981277,NaNL388.3857526981277,NaNL381.7521414811327,NaNL381.7521414811327,NaNL381.7521414811327 ,NaNL381.7521414811327,NaNL375.111754358911,NaNL375.111754358911,NaN...{ノーマル}...L330,0Z"

再描画関数は次のとおりです。

for (var i = 0; i < data.length; i++) {
    d3.select("#line" + id + "-" + i)
        .attr("d", function(d) { return line(d.values); })
        .attr("transform", null);
}

xAxis.call(x.axis);
yAxis.call(y.axis);

for (var i = 0; i < data.length; i++) {
    path.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");
} // the translation calculations can be safely ignored

誰かがこれについて洞察を注ぐことができるかどうか興味があります。ありがとう！