D3.js 如何使用d3沿圆形路径过渡?

D3.js 如何使用d3沿圆形路径过渡?,d3.js,D3.js,我用d3选择了一个元素(一个圆,但不重要)。我想让它顺时针旋转,回到原来的位置 通过阅读文档,我可以理解如何在线性路径上转换元素的属性,但在循环路径上如何转换呢?我是否需要使用类似于attrTween的东西来编写自定义转换代码,或者是否有内置的东西?多亏了@larskothoff的评论,我才能够相当简单地理解它。在咖啡脚本中: do rotateClockwise = -> element .transition()

我用d3选择了一个元素(一个圆,但不重要)。我想让它顺时针旋转,回到原来的位置


通过阅读文档,我可以理解如何在线性路径上转换元素的属性,但在循环路径上如何转换呢?我是否需要使用类似于
attrTween
的东西来编写自定义转换代码,或者是否有内置的东西?

多亏了@larskothoff的评论,我才能够相当简单地理解它。在咖啡脚本中:

    do rotateClockwise = ->
        element
            .transition()
            .attrTween 'cx', -> (t) -> initial[0] + 10 * Math.cos (2*Math.PI * t)                
            .attrTween 'cy', -> (t) -> initial[1] + 10 * Math.sin (2*Math.PI * t)                
            .duration 4000
            .ease 'linear'
            .each 'end', rotateClockwise

其中,
10
是圆形路径的半径,
initial
是初始起始位置

没有内置,但相对容易操作。看。