javascript - d3 拖动无法正常工作

Question

我制作了一个脚本，它允许我在 svg 元素中拖动一个圆圈。我有一个可拖动的蓝色球，但是当我向右拖动时，球不跟随鼠标。相反，它会跳到鼠标前面。我还有一个红球，当它被弹性运动拖动时，我想跟随蓝球。JsFiddle链接: http://jsfiddle.net/qnhey17f/1/

代码(Html):

<!-- I had to add the g element, because the other circle wouldn't display otherwise -->
<svg width="500" height="500" style="background-color: lightgrey; border: 1px solid black;">
    <g>
        <circle class="dragCircle" cx="50" cy="50" fill="blue" r="30" cursor="pointer">
    </g>
    <circle cx="50" cy="150" fill="red" r="30" cursor="pointer">
</svg>

代码(Js):

var drag = d3.behavior.drag().on("drag", dragMovement);
function dragMovement(d)
{
    var dX = d3.event.x;
    var dY = d3.event.y;
    d3.select(this).attr("transform", "translate(" + dX + ", " + dY + ")");
}
d3.select(".dragCircle").call(drag);

Answer 1

这对我有用 http://jsfiddle.net/qnhey17f/3/至于鼠标和蓝球的位置:

var drag = d3.behavior.drag().on("drag", dragMovement);
function dragMovement(d)
{
    var dX = d3.event.x - 50; // subtract cx
    var dY = d3.event.y - 50; // subtract cy
    d3.select(this).attr("transform", "translate(" + dX + ", " + dY + ")");
}
d3.select(".dragCircle").call(drag);