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。这样，拖动按预期工作，没有任何跳跃。此外，您只需指定文本的相对偏移量而不是绝对偏移量。