Question

我在d3.js工作，制作图表对象。我的图表有一个update()方法，可以刷新数据，使用转换来为更改设置动画。因为我有几个不同的对象在一个图表中进行动画处理，我想将转换存储为Chart原型的成员，然后使用transition.each包围我的转换以允许所有转换继承设置外面的。我正在使用setTimeout来安排图表的更新，因此它变成了一个动画。

该图表应该显示歪斜人口的均值分布，因为越来越多的手段被采用。这是一个工作版本，其中转换不会保存为图表原型的成员：http://jsfiddle.net/pmwxcpz7/

现在，我尝试修改上面的代码以在Chart的构造函数中存储转换。当我获取已保存的转换对象并在图表的transition.each()方法中调用update时，它适用于前几百个调用，然后停止工作。这是上面的代码，转换的创建已移至构造函数：http://jsfiddle.net/whtfny15/1/

当我运行代码的第二个版本时，图表停止动画部分通过，控制台显示许多错误

TypeError: t.__transition__[e] is undefined (d3.v3.min.js:5)

我已将代码缩减到此处生成错误所需的最小值：http://jsfiddle.net/bw1e2vLo/1/（请注意，错误显示在控制台中，但此脚本不会产生任何视觉输出。）

当我运行代码（在Firefox中），看着控制台时，我得到200个错误，所有这些都说

TypeError: t.__transition__[e] is undefined (d3.v3.min.js:5)

我不确定发生了什么。我希望能够将过渡对象保存到我的图表原型中，这样我就可以重复使用延迟和持续时间设置来制作未来的动画。

感谢您的帮助！

Answer 1

存储D3转换并不是一个好主意，因为它们是有状态的 - 当你对它们进行操作时会发生什么取决于它们是否已经安排，运行或完成。如果它们已经完成，你实际上根本无法对它们做很多事情，正如你所发现的那样。通常，您只应在创建过渡时操纵过渡。

进行多次转换的D3方法是重新选择要操作的元素并初始化新的转换。如果要重用它们，可以将参数（延迟和持续时间）存储在单独的变量中。如果您为转换本身使用自定义功能，您也可以单独保存它，并且＆＃34;分配＆＃34;使用.attrTween()进行过渡。

Answer 2

我想我会在d3 GitHub上添加我为此问题打开an issue，Bostock先生建议在使用转换之前使用transition.call()在回调中应用设置。

代码看起来像这样：

function myTransitionSettings(transition) {
  transition
      .duration(100)
      .delay(0);
}

// Then later…
d3.transition().call(myTransitionSettings)…

回调可以访问当前的转换对象，因此它可以将相同的设置应用于调用它的每个新转换。

d3.js保存的转换错误

2 个答案: