1

在关于过渡的 d3 文档中，它说这transition.select(selector)大约相当于selection.select(selector).transition()说子过渡版本从当前过渡继承缓动、持续时间和延迟。

我使用这两种方法的观察结果是，子转换与父转换的关系实际上必须比文档所暗示的要深一些。我所看到的是，如果我有 2 个彼此非常密切相关的过渡，我必须使用子过渡来让两个过渡完美地一起运行。

这是一个人为的例子来说明这一点（尽管这很简单，它可能不会在现实中显示问题）。假设我的 DOM 中有这个：

    <g>
        <circle></circle>
    </g>

过渡 1 继续运行<g>并应用“transform=translate(100,0)”来水平移动它。

过渡 2 继续运行，<circle>并通过应用“transform=translate(-100, 0)”将其以另一种方式水平向后移动来简单地反转这一点。

预期的结果是圆圈根本不动。但我实际看到的取决于过渡是如何设置的。如果我使用配置了相同属性的 2 个单独的过渡持续时间等，我会看到圆圈似乎略有抖动。这大概是因为传递到转换插值器的中间值稍微不同步。

但是，如果我使用子转换来设置 2 个转换，它看起来很完美。

我的问题是关于过渡和子过渡之间的关系。使用单独的转换与使用子转换在时序和插值方面有什么区别？

4

1 回答 1

2

子转换继承：

  • 过渡 id（允许它们与父过渡同时进行）
  • 参考时间（将它们与父转换同步）
  • 缓动函数
  • 每个节点计算的延迟
  • 每个节点计算的持续时间

查看transition-select.js和transition-selectAll.js以供参考。在您的情况下，这是同步 g 和 circle 元素上的转换所需的参考时间。

这是一个公共属性 ( transition.time)，因此如果您想同步两个转换而不通过transition.transition或transition.select创建它们，您可以显式设置它。但我看不出有任何理由不在这里使用子转换。

编辑：从 D3 3.0 开始，您可以使用transition.each(callback)创建继承过渡参数的过渡。这类似于transition.select 和transition.selectAll，不同之处在于您可以更灵活地选择元素来创建过渡。

于 2012-08-03T23:19:37.993 回答