Accepted answer

You could try fixing the position of the svg element, create a group under it and translate the group when any of the object is dragged. In this question you can find more details about this approach:

SVG dragging for group


The drag behaviour needs to be called on the selection whose position you're updating during the drag. In your code, you are updating the position of the parent node, which causes strange "jittering", because the drag position is itself relative to the parent node.

For example, you could replace your move function above with:

function move() {
      .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");

Related Query

More Query from same tag