我有一个圆形元素 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)
        });

}
javascript d3.js