0

I am quite new to d3 and am having trouble with zooming and dragging on a tree layout.

EDIT: Updated JSFiddle with information from comments

I have created a sample, JSFiddle here.

My issue is in the zoom function:

function zoom() {
        var scale = d3.event.scale,
            translation = d3.event.translate,
            tbound = -height * scale * 100,
            bbound = height * scale,
            lbound = (-width + margin.right) * scale,
            rbound = (width - margin.bottom) * scale;
        console.log("pre min/max" + translation);
        // limit translation to thresholds
        translation = [
        Math.max(Math.min(translation[0], rbound), lbound),
        Math.max(Math.min(translation[1], bbound), tbound)];
        console.log("scale" + scale);
        console.log("translation" + translation);
        d3.select("g")
            .attr("transform", "translate(" + translation + ")" +
            " scale(" + scale + ")");
    }

If you expand and collapse nodes and then try to drag, the root node always goes back to the top left corner. I added some logging that shows that the value of translation in this case is -1,-1

Is there a way I can preserve the current root node position?

VividD
  • 10,456
  • 6
  • 64
  • 111
mrkb80
  • 581
  • 2
  • 8
  • 25
  • There are a number of questions on this, e.g. [here](http://stackoverflow.com/questions/17405638/d3-js-zooming-and-panning-a-collapsible-tree-diagram) and [here](http://stackoverflow.com/questions/18785896/how-can-i-add-zooming-to-the-d3-collapsible-tree-example). Could you have a look if these solve your problem please? – Lars Kotthoff Dec 18 '13 at 09:11
  • Thanks. I actually used [this answer](http://stackoverflow.com/questions/20543127/d3-collapse-tree-zoom-and-pan-jumpiness-after-clicking-a-node?rq=1) and moved the zoom function outside the update, but the very first time I move the tree, I am still having the issue. Any idea why? (updated JSFiddle in question) – mrkb80 Dec 18 '13 at 14:43

1 Answers1

2

The problem is that the g element you're translating with the zoom behaviour is initialised with a non-zero translation. The zoom behaviour is not aware of this, resulting in the "jump" you see. To fix, initialise the zoom behaviour with that translation.

var zb = d3.behavior.zoom().scaleExtent([0.5, 5]).on("zoom", function () {
        zoom();
    });
zb.translate([margin.left, margin.top]);

Complete example here.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204