子转换继承了什么？

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和圆元素上的过渡所需的参考时间。

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

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