d3js拖SVG：拖

Question

之前，我按照教程上拖動此項目第g組項目移動https://gist.github.com/enjalot/1378144

這是我http://jsfiddle.net/EwGPu/

var circle = svg.append('svg:g').selectAll('circle') 
      .data(nodes, function(d) { return d.id; }); 

var g = circle.enter().append('svg:g').call(drag); 

g.append('svg:circle').attr('class', 'node') 
    .attr('cx', function (d) { return d.x; }) 
    .attr('cy', function (d) { return d.y; }) 
    .attr('r', 30) 
    .style('fill', function(d) { return d3.rgb(colors(d.id)).brighter().toString(); }) 
    .style('stroke', function(d) { return d3.rgb(colors(d.id)).darker().toString(); }); 

g.append('svg:text') 
    .attr('x', function (d) { return d.x + 0; }) 
    .attr('y', function (d) { return d.y + 4; }) 
    .attr('class', 'id') 
    .text(function(d) { return d.id; }); 

var drag = d3.behavior.drag() 
    .on('drag', function (d,i) { 
     d.x += d3.event.dx; 
     d.y += d3.event.dy; 
     d3.select(this).attr("transform", function (d, i) { 
      return "translate(" + [d.x,d.y] + ")"; 
     }) 
    }); 

然而，當我嘗試拖動一個項目時，首先拖動項目的方式離開它的當前座標，但後來一切都會正常拖動。我想不通，爲什麼在第一個阻力

Answer 1

問題的古怪行爲是，你正在使用的設置座標的兩種方式 - 在transform屬性爲組和圓形中的cx和cy屬性。沒有任何拖延，這個位置完全由後者決定。在拖動時，您正在設置組的翻譯，這會在之上生效的其他屬性。也就是說，您將（0,0）之前的組翻譯爲圓的當前位置，導致座標跳轉，因爲位置保持不變。

如果您僅使用其中一種方法，稍後會爲您節省一些麻煩。我已將您的jsfiddle here修改爲僅使用transform。這樣，拖動按預期工作，沒有任何跳躍。此外，您只需指定文本的相對偏移量而不是絕對偏移量。