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

Answer 2

更正后的代码：

<svg>
<circle class="dragCircle" transform="translate(50, 50)" fill="blue" r="30" cursor="pointer">
</svg>

d3拖动无法正常工作

2 个答案: