如何沿着圆形路径转换d3?

时间:2014-04-27 16:50:02

标签: d3.js

我有一个用d3选中的元素(一个圆圈,但它不应该)。我希望它以顺时针方向移动回到原来的位置。

通过transition文档阅读我可以理解如何在线性路径上转换元素的属性,但是如何在圆形路径上进行转换?我是否必须使用attrTween之类的内容编写自定义转换代码,或者内置了哪些内容?

1 个答案:

答案 0 :(得分:0)

感谢@ LarsKotthoff的评论,我能够很清楚地看出来。在coffeescript中:

    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是初始起始位置