d3.js - データセットを縮小するための領域の d3 遷移

Question

次のトランジションが期待どおりに機能しないのはなぜだろうと思っています。

折れ線グラフでは、ユーザーはグラフに表示するさまざまな期間を選択できます。タイムスパンが長くなれば、アニメーションは問題ありません。線は少し右に移動し、その線の下の領域は 100% 完璧に移動します (線と領域の間にギャップなどはありません)。

一方、タイムスパンが減少すると、領域遷移は醜い動作を示します。

1) 初期状態

2) 1週間に変更、移行開始

3) トランジションの持続時間は 1 秒です

4) 終了状態 - ここでは問題ありません。

私は基本的に同じ行の遷移関数を使用しています:

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

およびエリアの場合：

var area1 = d3.svg.area()
.x(function (d) { return x(d.date); })
.y0(height)
.y1(function (d) { return y(d.result2); });

エリア更新で明示的な enter() または exit() を使用していません。

// update area1
svg.selectAll(".area1")
.transition()
.duration(1000)
.attr("d", area1(data));

領域の場合に enter() または exit() を使用する方法がわかりませんでした。不要なデータポイントを即座に削除する明示的な exit().remove() で問題が解決するのでしょうか? しかし..ライン/エリアに対してそれを行う方法は??

助けてくれてありがとう！

編集

よし、exit().remove() の問題はありませんでした。なぜなら、1 行の場合、これもあまり意味がないからです。大きなデータセットから小さなデータセットへの移行を修正したのは、最大 4 週間の最大期間のデータ配列を複製し、現在表示されている期間外のすべてのデータポイントに 0 の y 値を与え、この配列を使用して領域をフィードすることでした。 :

svg.selectAll(".area1")
    .data([data2]) // contains data for 4 weeks, with 0's on time outside of current span
    .transition()
    .duration(1000)
    .attr("d", area1);

x 軸は、現在表示されているタイムスパンのみのデータを配列にフィードしているため、次のように調整されます。

// array "data" contains only data for the desired time horizon, eg 1 week
x.domain(d3.extent(data, function (d) { return d.date; }));