How To Remove "jumpiness" Upon Panning With D3.behavior.zoom()

Here's a demo: http://jsbin.com/okUxAvE/18/edit?js,output I'm using d3.behavior.zoom() (which also does panning). I only want panning and no actual zoom. Right now, when you drag p

Solution 1:

1. The zoom behaviour determines the coordinates of the mouse relative to the element it is attached to to find the translation. You've modifying the position of the element the zoom behaviour is attached to and therefore the relative coordinates used for the transform. Hence you're seeing this jitter. The solution is to attach the zoom behaviour to another element, e.g. to the SVG itself. This also solves 2.

2. The entire canvas can be made draggable by attaching the zoom behaviour to the SVG element itself. Then you just need to modify the zoom handler to take into account the margins when setting the translation.

To fix the jitter and make the entire canvas draggable simply change the order of the lines when creating the SVG:

var svg = d3.select("#map").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .call(pan)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Then, to fix the translation offset, modify the zoom handler:

function panned() {
  svg.attr("transform",
     "translate(" + (d3.event.translate[0] + margin.left) + "," +
                    (d3.event.translate[1] + margin.top) + ")");
}

Complete example here.