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