d3.js - D3 过渡 - 暂停和恢复

Question

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

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

Answer 1

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

如果transition中包含这个属性，值会逐渐从0变为1。正如教程作者指出的，这可以用来获取transition在任意时间点的状态——你只需要查询“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然后将过渡添加到在指定持续时间内更改为的同一元素e（而不是）。cT1