D3 Drag Jumping To Other Position When Clicked - Origin?

Trying to drag groups. Why doesn't origin work here? Notice how it jumps when you first click on it? JSFIDDLE Based on this: http://bl.ocks.org/mbostock/1557377 var drag = d3.behav

Solution 1:

You're mixing different ways of setting positions -- you're setting transform and cx and cyon the circles, but not on thegelements that you want to drag. While it can be made to work by computing the various offsets, it's much easier if you set the position for the things you're interested in (i.e. theg` elements) and that the drag behaviour is called on.

var svgG = svg.append("g")
  .attr("transform", function(d) { return"translate(" + [ d.x,d.y ] + ")"; })
  .call(drag);

Complete example here.