java环绕圆的文字_绕中心点旋转圆（D3）

我有一个圆形元素 cx 和'm trying to use to rotate the circle around a center point (of a circle). I'm使用D3的 d3.behavior.drag 这个 . 我正在使用 d3.event.x 和 d3.event.y 给出的新点来计算这些点与初始点之间的差值 . 从其他类似的帖子来看，我是一种计算圆圈新位置的方法：

var rad = Math.atan2(deltaY, deltaX);

但是，当我单击要拖动的圆圈时， it seems to jump 180 degrees on x mouse movement, and moves much to quickly on y mouse movement . 在此之后，它似乎正确地响应鼠标行为 . 我无法弄清楚为什么圆圈跳到弧线上的不同点...

以下是相关代码，完全见于codepen：

g.append('circle')

.attr({

class: 'rotatable',

r: 20,

cx: r * Math.cos(0),

cy: r * Math.sin(0),

})

.call(drag);

// store initial points

var xInit = d3.select('.rotatable').attr('cx');

var yInit = d3.select('.rotatable').attr('cy');

function drag() {

// calculate delta for mouse coordinates

var deltaX = d3.event.x - xInit;

var deltaY = d3.event.y - yInit;

var rad = Math.atan2(deltaY, deltaX);

d3.select(this)

.attr({

cx: r * Math.cos(rad),

cy: r * Math.sin(rad)

});

}