D3.js 在另一个转换正在进行时启动转换

我有一个过渡，它填充了一个圆形进度条。在某些情况下，我希望进度条也旋转，但在进度条的填充部分完成之前，我不希望它旋转

我尝试了以下方法：

• 在转换中添加

  延迟

  • 这似乎推迟了整个过渡
• 在定义旋转转换之前调用

  transition

  • 这将执行两个转换，但以串行方式（第二个转换等待第一个转换完成）
• 在第一个元素发生时调用元素上的

  transition

  （我正在使用

  attrTween

  方法）
  • 这会导致第一次转换立即停止，然后执行第二次转换

示例（基于鲁本提供的示例）：

让svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：20，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
常量椭圆=g.append（'椭圆'）
.attr（'id'，'9'）
.attr（'cx'，250）
.attr（'cy'，250）
.attr（'rx'，25）
.attr（'ry'，25）
.attr（“填充”、“黑色”）；
椭圆
.过渡（“rx”）
.期限（2000年）
.ease（“立方输入输出”）
.attr（'rx'，250）；
椭圆
.过渡（“ry”）
.持续时间（1000）
.ease（“立方输入输出”）
.attr（'ry'，250）
在d3 v3.5.17中添加了以下命名转换。对于v3.4.3，它不起作用。如果可能，我建议升级到v3.5.x


让svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：20，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
常量椭圆=g.append（'椭圆'）
.attr（'id'，'9'）
.attr（'cx'，250）
.attr（'cy'，250）
.attr（'rx'，25）
.attr（'ry'，25）
.attr（“填充”、“黑色”）；
椭圆
.过渡（“rx”）
.期限（2000年）
.attr（'rx'，250）；
椭圆
.过渡（“ry”）
.延迟（1000）
.持续时间（1000）
.attr（'ry'，250）

我刚才回答了，这正好涵盖了您使用的d3的哪个版本？@RubenHelsloot v 3.4.3。我尝试了您链接的解决方案，但第一次转换没有起任何作用。一旦我给第二个添加了延迟，第一个转换发生，直到延迟结束，然后它停止，第二个转换发生。你能分享你的代码吗？这样会更容易找到工作workaround@RubenHelsloot我更新了我的问题，加入了一个例子。它在您使用的d3.js版本上运行良好，但在我使用的版本上运行不正常。我猜这可能是一个bug，或者api与您现在实现它的方式不同。