javascript - 子转换继承了什么？

Question

在关于转换的 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 个转换，它看起来很完美。

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

Answer 1

子转换继承:

• 过渡 ID(允许它们与父过渡同时进行)
• 引用时间(将它们与父转换同步)
• 缓动函数
• 每个节点计算的延迟
• 每个节点计算的持续时间

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

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

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