Zoomable treemap in D3 v4
<p>I'm trying to add zoom behaviour to my treemap in D3 v4 based on these examples: <a href="https://bl.ocks.org/mbostock/b4c0f143db88a9eb01a315a1063c1d77" rel="nofollow noreferrer">1</a> and <a href="http://jsfiddle.net/ramnathv/amszcymq/" rel="nofollow noreferrer">2</a>. It's built with HTML elements, rather than SVG and I have made it responsive by using percentage instead of pixel units.</p>

<p>It works great so far but now I'd like to zoom in to individual cells with a click until the last child has been reached. Then the click would go back to the root of the tree.</p>

<p>Here's my code so far: <a href="http://codepen.io/znak/pen/qapRkQ" rel="nofollow noreferrer">http://codepen.io/znak/pen/qapRkQ</a></p>

<p>I'm struggling with the zoom function that works in V4 and it's all over the place:</p>

<pre><code>function zoom(d) {

    console.log('clicked: ' + d.data.name);

    x.domain([d.x0, d.x1]);
    y.domain([d.y0, d.y1]);

    var t = d3.transition()
        .duration(800)
        .ease(d3.easeCubicOut);

    chart
        .merge(cell)
        .transition(t)
        .style("left", function(d) { return x(d.x0) + "%"; })
        .style("top", function(d) { return y(d.y0) + "%"; })
        .style("width", function(d) { return x(d.x1 - d.x0) + "%"; })
        .style("height", function(d) { return y(d.y1 - d.y0) + "%"; });

    node = d; //?
    d3.event.stopPropagation(); //?
}
</code></pre>

<p>How do I update and transition elements with D3 v4?</p>

<p>Thanks for any hints! </p>