Evite saltar de um texto SVG com uma âncora de texto enquanto arrasta
Aqui está um texto SVG com uma âncora:
<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>
Agora, se eu escrever uma função de arrastar:
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);
Ele salta depois de arrastá-lo, dependendo da sua posição de âncora. Existe uma solução para isso?
Eu tentei definir o texto âncora para nulo e, em seguida, re-definir novamente, mas isso não funciona. Eu não quero que a experiência do usuário de arrastar para alterar a todos. Nem mesmo quando o arrasto termina.
Qualquer ideia?
Aqui está o JSFiddle:http://jsfiddle.net/sewVr/