Question

我正在尝试创建zoomable treemap example的响应版本。需要添加什么才能使树形图随窗口调整大小？

当我尝试在treemap.size()的更新方法中更改$(window).resize()时，似乎没有任何事情发生。

我将svg设置为style="width: 100%; height: 100%"并且svg调整大小，但树形图的布局却没有。我还尝试使用viewbox和preserveAspectRatio per this answer，树形图看起来最初是正确的，但缩放功能不再正常，因为treemap布局不知道其正确的大小

Answer 1

处理此问题的一种方法是，Lars Kotthoff告诉您可以重绘树形图。

首先，您应该将宽度和高度参数指定为图形容器的宽度和高度，然后才能指定容器宽度和高度（以百分比表示）。并将可缩放地图drwing脚本包装在函数内（让我们将其称为zoomabletreemap（））

然后你应该使用JavaScript为window resize事件调用zoomabletreemap（）函数。在调用javascript之前，您还应删除旧图。

$(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和我上面解释的一样

如何使d3可缩放树形图响应？

1 个答案: