D3.js 如何修复d3 v4中的重放转换？

我正在用d3实现一个图表，它有一个滑动的x轴

问题是，当我切换到另一个选项卡，然后返回10秒后，d3似乎试图重放丢失的过渡，这导致轴的行为非常尴尬。看

迈克·博斯托克：

D34.0通过改变时间的定义解决了这个问题。转换通常不需要与绝对时间同步；过渡主要是用于跨视图跟踪对象的感知辅助工具。因此，D34.0在感知时间上运行，只有当页面位于前台时，感知时间才会前进。当标签被背景化并返回到前景时，它只是简单地拾取，就好像什么都没发生过一样

这真的是固定的吗？我做错什么了吗

常数时间窗=10000； const transitionDuration=3000； const xScaleDomain=now=new Date=> [现在-时间窗口，现在]； const totalWidth=500； 常数总高度=200； 常量边距={ 前30名， 右:50,， 底数：30， 左：50 }; const width=总宽度-margin.left-margin.right； 常量高度=总高度-margin.top-margin.bottom； const svg=d3。选择“.chart” .append'svg' .attr'width'，totalWidth .attr'height'，totalHeight .附加“g” .attr'transform'，'translate${margin.left}，${margin.top}` svg .append'rect' .attr'width'，width .attr'height'，height； //添加x轴 常量xScale=d3.scaleTime .domainxScaleDomainnew日期-转换持续时间 .范围[0，宽度]； 常数xAxis=d3.x刻度； const xAxisSelection=svg .附加“g” .attr'transform'，'translate0，${height}` .callxAxis； //生动活泼 常量动画==>{ xScale.domainxScaleDomain； Xaxis选择 过渡 .持续时间 .缓和的；缓和的 callxAxis先生 .在“结束”时，设置动画； }; 使有生气 svg{ 利润率：30像素； 背景色：ccc； } 直肠{ 填充：fff； 轮廓：1px虚线ddd； }

---

问题不在于D3转换。这里的问题是新的日期

每次转到另一个选项卡时，转换都会暂停。到目前为止，一切顺利。但是当你回到图表上，比如说，20秒后，你会得到一个新的日期，即当前日期。。。但是，您的时间窗口以及过渡持续时间是相同的：

这使得轴向前跳得更快，因为域中任意点的新旧值之间的差值不再是3秒

这里有一个非常简单的解决方案，太粗糙，需要改进，只是为了告诉你问题是新的日期。在这个解决方案中，我手动将每个动画中的日期设置为跳跃10秒，而不管您在另一个选项卡中停留多长时间：

var t = xScale.domain()[1];
t.setSeconds(t.getSeconds() + 10);

xScale.domain([xScale.domain()[1], t]);

这是代码笔：

---

使用您的代码，更好的解决方案是更改时间窗口和转换持续时间，以考虑新日期和旧日期之间的差异，即用户在另一个选项卡中的时间。

谢谢！这是有道理的。d3是否为暂停的过渡和恢复的过渡提供了挂钩，以便我可以测量时间上的差异？从我的头顶上看，我不认为它是天生的挂钩，但你可以创建自己的函数。

var t = xScale.domain()[1];
t.setSeconds(t.getSeconds() + 10);

xScale.domain([xScale.domain()[1], t]);