D3 collapsible tree - jumpy on zoom

Question

I've already spent too much time trying to figure this out. My goal is to create d3 collapsible tree but for some reason when you zoom it, it moves the tree on position 0,0. I've already seen a few questions with similar problem such as this one d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging but can't figure it out how to apply it to my situation.

I think this part is making a problem but I'm not sure how to change it to have the proper zooming functionality.

d3.select('g').transition()
    .duration(duration)
    .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")")
zoomListener.scale(scale);

Here is my code: https://jsfiddle.net/ramo2600/y79r5dyk/11/

Answer 1

You are translating your zoomable g to position [100,100] but not telling the zoom d3.behavior.zoom() about it. So it starts from [0,0] and you see the "jump".

Modify your centerNode function to:

function centerNode(source) {
    scale = zoomListener.scale();
    // x = -source.y0;
    y = -source.x0;
    // x = x * scale + viewerWidth / 2;
    x = 100;
    y = 100;
    // y = y * scale + viewerHeight / 2;
    d3.select('g').transition()
        .duration(duration)
        .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")")
    zoomListener.scale(scale);
    zoomListener.translate([x,y]); //<-- tell zoom about position
}