d3 拖动无法正常工作答案

【问题标题】：d3 dragging not working correctlyd3 拖动无法正常工作
【发布时间】：2015-10-23 18:20:27
【问题描述】：

我制作了一个脚本，它允许我在 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);

【问题讨论】：

您所说的弹性运动是什么意思，您针对该特定功能尝试过什么？

标签： javascript html d3.js svg drag

【解决方案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);

【讨论】：

如果我添加第二个圆圈不起作用，第二个圆圈不会更好地拖动。
我自己解决了这个问题，cx 和 cy 属性导致了这个问题，所以我改用了 transform translate。
太棒了。然后考虑添加您的最终解决方案作为您自己的答案。 :)

【解决方案2】：

更正的代码：

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

【讨论】：