Question

我有一个圆形元素，其cy和d3.behavior.drag属性我试图围绕圆心的中心点旋转圆圈。我正在使用D3＆＃39; d3.event.x。我使用d3.event.y和var rad = Math.atan2(deltaY, deltaX);给出的新点来计算这些点与初始点之间的差值。在其他相似的帖子中，我收集到了使用JavaScript的反正切方法来计算圈子的新位置：

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)
        });

}

然而，当我点击要拖动的圆圈时，它似乎在x鼠标移动时跳跃180度，并在鼠标移动时快速移动。在此之后，它似乎正确地响应鼠标行为。我无法弄清楚为什么圆圈会跳到弧线上的不同点......

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

{{1}}

绕中心点旋转圆（D3）

0 个答案: