D3 过渡 - 暂停和恢复答案

【问题标题】：D3 transitions - pause and resumeD3 过渡 - 暂停和恢复
【发布时间】：2013-03-28 13:14:48
【问题描述】：

我试图从这个guide 了解 D3 转换的“暂停”和“恢复”。虽然我了解“暂停”是如何工作的，但在“恢复”方面我几乎没有迷失。我无法理解作者的解释，特别是“线性”或第一次简历解释。我的问题是 e.attr("T",0); 和 .attr("T",1); 到底在做什么？

我正在将恢复功能应用于视频或波形的播放头示例：jsfiddle

【问题讨论】：

【解决方案1】：

代码e.attr("T",0) 和.attr("T",1) 设置选定节点的属性。即，创建并设置新属性“T”。这样做的目的纯粹是为了方便停止和恢复 -- 0 表示开始前的转换，1 表示结束。

如果transition中包含这个属性，值会从0逐渐变为1。正如教程作者指出的，这个可以用来获取transition在任意时间点的状态——你只需要查询“T”的值。如果您还保存了特定的过渡，则可以使用该值在任何时候暂停和恢复。

请注意，“T”没有什么特别之处。您可以使用任何（未使用的）属性名称。目的只是为了了解过渡进展的程度。

【讨论】：

【解决方案2】：

我也一直在为这个确切的问题而苦苦挣扎，我认为示例中的一个错字一直让我失望。作者写的地方：

var e = d3.select("#time");
e.attr("T",0);

c.transition()
    .duration( time )
    .ease( "linear" )
    .attr("T",1);

似乎e 将其T 属性更新为c 转换，这没有任何意义。相反，我认为应该如下：

var e = d3.select("#time");
e.attr("T",0);

e.transition()
    .duration( time )
    .ease( "linear" )
    .attr("T",1);

现在我们选择#time 元素，将其T 属性的初始值设置为0，然后向同一元素e（而不是c）添加一个转换，将T 更改为1 在指定的持续时间内。

【讨论】：