1

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

当我尝试更改treemap.size()更新方法时$(window).resize()，似乎什么也没发生。

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

4

1 回答 1

1

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

首先，您应该将宽度和高度参数指定为图形容器的宽度和高度，然后再以百分比形式指定容器的宽度和高度。并将可缩放地图绘制脚本包装在一个函数中（我们将其称为 zoomabletreemap()）

然后，您应该使用 JavaScript 为窗口调整大小事件调用 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();
            });

这是我上面解释的相同的工作示例

于 2014-07-07T07:50:23.950 回答