D3转换 - 暂停和恢复

Question

我试图理解来自此guide的D3过渡的'暂停'和'恢复'。虽然我理解“暂停”是如何起作用的，但在“简历”方面我很少迷失。我无法理解作者的解释，特别是'线性'或第一次简历解释。我的问题是e.attr("T",0);和.attr("T",1);究竟做了什么？

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

Answer 1

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

如果此属性包含在转换中，则该值将逐渐从0更改为1.正如本教程的作者所指出的，这可以用于在任何时间点获取转换的状态 - 您只需要查询“T”的值。如果您也保存特定转换，则可以使用该值在任何时刻暂停和恢复。

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

Answer 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，然后将转换添加到将T更改为{{{}的同一元素1}}在指定的持续时间内。