4

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

在折线图中，用户可以选择他们希望图表显示的不同时间跨度。如果时间跨度增加，则动画很好：线条向右移动一点，线条下方的区域移动 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() 会立即删除不需要的数据点可以解决我的问题？但是..如何为一条线/区域做到这一点？

谢谢你的帮助！

编辑

好吧，exit().remove() 没有问题，因为对于单行，这也没有多大意义，就像我现在看到的那样。修复从大数据集到小数据集的转换的方法是克隆数据数组，最长 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; }));
4

0 回答 0