How to remove "jumpiness" upon panning with d3.behavior.zoom()

d3.js, javascript

Solution

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.

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.

Problem

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 part of the tree, redrawing is all weird and "jumpy" (hence the demo—to see it is to know what I mean). I'm assuming that I have some kind of conflict with the click event (clicking on nodes expands them). However, I can't see what the problem is, let alone how to fix it. Also, I would like the user to be able to pan by dragging the background as well, not only by positioning above the tree. So actually there are two questions here: - What am I doing wrong with the zoom implementation and how might I go about fixing it? and - What can I do to make the entire canvas "pannable"?

Original source