d3 collapse tree zoom and pan - jumpiness after clicking a node

Question

If I zoom/pan after I clicked a node my scaling and zooming jumps back to original position.

Here is my zooming function:

zoom: function() {
var scale = d3.event.scale,
    translation = d3.event.translate,
    tbound = -h * scale,
    bbound = h * scale,
    lbound = (-w + m[1]) * scale,
    rbound = (w - m[3]) * scale;
// limit translation to thresholds
translation = [
    Math.max(Math.min(translation[0], rbound), lbound),
    Math.max(Math.min(translation[1], bbound), tbound)
];
d3.select(".drawarea")
    .attr("transform", "translate(" + translation + ")" +
          " scale(" + scale + ")");
}

I know that I need to stash the values for zooming and reuse them but I do not know how.

I don't have a working jsfiddle of my code at the moment, but I found this one which has the same problem.

Here is my structure:

            postCreate: function () {...},

//--------------------------------------------------------------

            getTreeStructureFromMapModel: function () {...},

            _getDiagonal: function () {...},

            getDrawingArea: function (w, h) {...},

//--------------------------------------------------------------

            update: function (source) {...},

            updateTheNodes: function (source, root) {...},

            enterNewNodesAtParentsOldPosition: function (source, root, node) {...},

            transitionNodesToTheirNewPosition: function (node) {...},

            transitionExistingNodesToParentsNewPosition: function (node, source) {...},

//--------------------------------------------------------------

            updateTheLinks: function (source) {...},

            enterNewLinksAtParentsOldPosition: function (link, source) {...},

            transitionLinksToTheirNewPosition: function (link) {...},

            transitionExistingLinksToParentsNewPosition: function (link, source) {...},

//--------------------------------------------------------------

            onNodeClick: function () {...},

            toggleAll: function (d) {...},

            toggle: function (d) {...},

            zoom: function() {...}

I put the the code for adding the zoomfunction inside postCreate().

Here is my postCreate:

postCreate: function () {
    this.inherited(arguments);

    var d3 = this.d3;
    this._i = 0;

    var margins = this.margins;
    var w = this._w = 900 - margins.left - margins.right;
    var h = this._h = 900 - margins.top - margins.bottom;

    this._tree = d3.layout.tree()
        .size([h, w]);

    his._drawingArea = this.getDrawingArea(w, h);

    d3.select("svg")
        .call(d3.behavior.zoom()
        .scaleExtent([0.5, 5])
        .on("zoom", this.zoom));

    var root = this._root = this.getTreeStructureFromMapModel();
    root.x0 = h / 2;
    root.y0 = 0;

    this.toggleAll(root);
    this.update(root);
},

The vis is created in getDrawingArea():

getDrawingArea: function (w, h) {
    var margins = this.margins;

    var vis = this.d3.select(this.domNode).append("svg:svg")
        .attr("width", w + margins.left + margins.right)
        .attr("height", h + margins.top + margins.bottom)
        .append("svg:g")
        .attr("class", "drawarea")
        .append("svg:g")
        .attr("transform", "translate(" + margins.left + "," + margins.top + ")")
    return vis;

 },

Answer 1

Move the code that attaches the zoom behaviour to the SVG outside the update function. Working example here.