d3js перетащить SVG: г вещь двигаться, прежде чем перетащить

Question

Я следую учебник по перетаскиванием группы товара здесь 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) до текущего положения круга, вызывая скачок в координатах, так как позиция cxcy остается неизменной.

Это поможет вам избавиться от головной боли позже, если вы используете только один из методов. Я изменил ваш jsfiddle here только для использования transform. Таким образом, перетаскивание работает как ожидалось без каких-либо скачков. Кроме того, вам нужно только указать относительное смещение текста вместо абсолютного.