2

这是一个带有锚点的 SVG 文本：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:200px;height:200px;">
  <text x="50" y="30" fill="red" text-anchor="start">I love SVG</text>
</svg>

现在如果我写一个拖动函数：

var dragMove = function (d,i) {
    //d3.select(this).attr("text-anchor", "null"); Does not work
    d3.select(this).attr("x", d3.event.x)
                .attr("y", d3.event.y);
};

var dragEnd = function (d,i) {
    //d3.select(this).attr("text-anchor", "start"); Does not work
};

var drag = d3.behavior.drag()
                .on("drag", dragMove)
                .on("dragend", dragEnd);

d3.select("svg")
    .select("text")
    .call(drag);

在您将其拖动到其锚点位置后，它会跳跃。有针对这个的解决方法吗？

我尝试将锚文本设置为空，然后再次重新设置，但这不起作用。我根本不希望拖动的用户体验发生变化。即使拖动完成也不行。

任何想法？

这是 JSFiddle：http: //jsfiddle.net/sewVr/

4

2 回答 2

3

使用d3.event.dxandd3.event.dy获取相对拖动位置的变化并将其应用到您的dragMove()函数中。

演示在这里：http: //jsfiddle.net/sewVr/1/

于 2013-10-08T14:21:02.970 回答
0

您可以通过保存鼠标单击发生的位置与元素原点之间的偏移量x和偏移量来做到这一点。喜欢这里：http: //jsfiddle.net/twKD9/ytext

于 2013-10-08T15:02:27.683 回答