Javascript 子转换继承什么？

在d3关于过渡的文档中，它说

transition.select（selector）

大致等同于

selection.select（selector）.transition（）

表示子过渡版本继承了当前过渡的缓和、持续时间和延迟

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

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

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

转换1在

上运行，并应用“transform=translate（100,0）”将其水平移动

Transition 2在

上运行，并通过应用“transform=translate（-100，0）”将其以另一种方式水平向后移动，从而简单地将其反转

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

但是，如果我使用子变换来设置这两个变换，它看起来非常完美

---

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

子转换继承：

• 转换id（允许它们与父转换同时进行）
• 参考时间（与父转换同步）
• 缓和作用
• 每个节点计算的延迟
• 每个节点计算的持续时间

请看一看，以供参考。在您的例子中，同步g和circle元素上的转换所需的是参考时间

这是一个公共属性（

transition.time

），因此如果希望同步两个转换，而不通过或创建它们，则可以显式设置它。但我看不出有任何理由不在这里使用子转换

---

编辑：从D33.0开始，可以使用创建继承过渡参数的过渡。这与transition.select和transition.selectAll类似，只是您可以更灵活地选择元素来创建转换。

这是一个很好的信息，谢谢！我们面临的一个挑战是，在上运行的代码与在上运行的代码在某种程度上是分离的。我们通过在选择上设置“activeTransition”属性来解决这个问题，以便以后检索。我想知道你是否认为这个想法在d3中更普遍有用？通过这种方式，如果您希望从一个选择中拖出一个活动的转换来创建更多的子转换，则始终可以从该选择中拖出一个活动的转换。可能在同一个选择中安排了多个转换（或者在碰巧同时选择的不同元素上安排了不同的转换），因此我认为说一个选择具有“活动转换”。我认为最好向活动转换传递一个引用（a

var

），以便将不同的代码段连接在一起。另外一件事是（非链接）我今天学到的子转换对同步很重要的是计时器本身。即使在两个转换上将transition.time设置为相同的值，它们也不一定会完全同步，因为它们运行在两个单独的计时器上，当动画帧触发时，会一个接一个地调用。非链接子转换Ansysions共享计时器，因此它们始终完全同步。