D3.js d3缩小数据集区域的转换

我想知道为什么以下转换没有按预期工作：

在折线图中，用户可以选择希望图表显示的不同时间跨度。如果时间跨度增加，则动画效果良好：直线向右移动一点，该直线下方的区域移动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); });

我没有在区域更新中使用任何明确的进入或退出：

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

我不知道在区域的情况下如何使用enter或exit，可能是一个显式的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; }));

---

实际上，您没有使用任何选择，因为您没有使用.data-这类似于svg.selectAll.area1.data[data].transition.attrd，area1。无论如何，该问题是由区域方向错误引起的，即沿直线翻转。您可以通过显式地对数据点进行排序来避免这种情况。嗨，Lars，我发现在更新区域之前反转数据可以提供一种非常好的过渡效果。对于数据集大小不断变化的线/区域，是否有任何关于输入和退出模式的链接？我很难理解这一点。e、 g.enter.appendpath将导致添加10个单独的路径。对于区域和线，这通常只有在有多个区域/线的情况下才有意义-对于单个区域/线，输入/退出/更新选择将只包含一个元素。尝试以数组形式传入数据，例如.data[data]，它应该可以工作。输入/退出只包含一个元素是有意义的。不幸的是，以数组的形式传递数据并没有改变任何事情。您必须为我发布一个完整的示例来正确地研究这一点，但我想这与您最初的问题没有任何关系。