在拖动时避免使用文本锚跳转SVG文本
这是一个带锚点的SVG文本：
I love SVG 现在，如果我写一个拖动function：
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);
根据其锚点位置拖动它后会跳转。 这个问题有方法解决吗？
我尝试将anchor-text设置为null，然后再次重新设置它，但这不起作用。 我不希望拖动的用户体验完全改变。 甚至在拖动完成时也是如此。
任何的想法？
这是JSFiddle： http ： //jsfiddle.net/sewVr/
您可以通过保存鼠标单击发生位置和text元素原点之间的x和y偏移量来实现。 喜欢这里： http ： //jsfiddle.net/twKD9/
使用d3.event.dx和d3.event.dy获取相对拖动位置更改并将其应用于dragMove()函数。
在这里演示： http ： //jsfiddle.net/sewVr/1/