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

不要旋转悬停path，而是轮播包含g和path的{{1}}元素：

circle

然后：

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

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

D3中的并发转换（填充路径后的圆圈）

1 个答案: