svg - d3jsドラッグsvg:gアイテムはドラッグ前に移動します

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] + ")";
        })
    });

ただし、アイテムをドラッグしようとすると、最初のドラッグでアイテムが現在の座標から離れて移動しますが、その後はすべてが正常にドラッグされます。最初のドラッグで奇妙な動作が発生する理由がわかりません