d3收缩数据集的区域转换

Question

我想知道为什么以下过渡不能按预期工作：

在折线图中，用户可以选择他们希望图表显示的不同时间范围。如果时间跨度增加，则动画很好：线条向右移动一点，该线条下方的区域移动100％完美（线条和区域之间没有间隙）。

如果另一方面时间跨度减少，那么区域转换会显示丑陋的行为：

1）初始状态

2）更改为一周，转换开始

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（）可以立即删除不需要的datapoints来解决我的问题？但是..如何为行/区域做到这一点？

感谢您的帮助！

修改

好吧，这不是exit（）。remove（）的问题，因为对于单行来说，这也没有多大意义，正如我现在所看到的那样。 修复从大型数据集到小型数据集的过渡的原因是克隆了整个4周最大时间跨度的数据数组，然后将所有超出当前可见时间跨度的数据点的y值设置为0并使用此数组来提供区域：

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; }));