javascript - D3 中的并发转换(循环遵循填充路径)

Question

我正在尝试创建简单的动画仪表图表，每个圆圈的末端都有红点。整个例子在这里https://jsfiddle.net/yhLch8fc/3/ (请不要解决文本位置，这不是问题)。我尝试搜索堆栈溢出，但像 Change starting point of alongPath animation 这样的教程对我没有帮助，因为我的路径是通过 X,Y 平移并旋转的。我认为代码的关键部分是:

circle.transition().duration(_duration)
    .attrTween('cx', arcCircleX(_myPath.node()))
    .attrTween('cy', arcCircleY(_myPath.node()));

您可以轻松切换到类似版本(上面的堆栈溢出代码):

circle.transition().duration(_duration)
    .attrTween('transformation', circleTween(_myPath.node()));

不知道为什么，红圈好像移到了左边。也许是因为原始路径被平移和旋转了。

(原始版本是，当我尝试遵循填充路径时，但它也不起作用。)

Answer 1

不要旋转悬停路径，而是旋转包含路径和圆的g元素:

enter.append("g").attr("class", "hover")
     .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + "), rotate(-90)");

然后:

circle.transition().duration(_duration)
   .attrTween('transform', circleTween(_myPath.node()));

这是一个example 。这就是你所追求的吗？