CODEWITHSUNDEEP
svgd3.jsresponsive-designtreemap
Tim Shi
Tim Shi

Reputation: 257

How do I make the d3 zoomable treemap responsive?

I'm trying to create a responsive version of the zoomable treemap example. What needs to be added so that the treemap resizes with the window?

When I try to change treemap.size() in an update method on $(window).resize(), nothing seems to happen.

I'm setting the svg to style="width: 100%; height: 100%" and the svg resizes, but the layout of the treemap does not. I also tried using viewbox and preserveAspectRatio per this answer and the treemap looks initially correct, however the zooming functionality no longer works correctly because the treemap layout doesn't know its correct size.

Upvotes: 1

Views: 2951

Answers (1)

Rameez
Rameez

Reputation: 601

One way to handle this is as Lars Kotthoff told you can redraw the treemap.

For that first you should specify the width and height parameters as your graph containers width and height before that you should specify container width and height in percentage. And wrap the zoomable map drwing script inside a function (Let's call it as zoomabletreemap())

Then you should call the zoomabletreemap() function for the window resize event using JavaScript. Before calling the javascript you should remove the old graph also.

$(window).resize(function () {
            var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg
            div.parentNode.removeChild(div);
            ZoomableTreeMap();
            });

Here is the working example for the same I explained above

Upvotes: 1

Related Questions