是否有人知道任何允许根据用户设置的窗口大小调整 svg 元素（也包括整个内容）大小的 js 代码。我的用户将希望在其活动桌面上以小型自定义视图查看 d3 图形。同时其他人将在其活动桌面上全屏运行。这意味着图表需要根据用户的偏好自行调整大小。
问问题
7035 次
2 回答
10
几天前，我整理了一个关于这种期望行为的演示。在这里查看 - http://bl.ocks.org/4444770
基本上，您听窗口的大小，对包裹所有 SVG 元素的 g 元素应用比例变换，然后调整父 SVG 的大小。在页面加载和窗口调整大小时调用此代码，其中“容器”是保存 SVG 的 div：
d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
$("svg").height($("#container").width()*0.618);
如果您的 SVG 放置在 div 中，这是一个很好的方法。
另一种方法是使用 SVG 视图框，正如 Mike Bostock 在这里演示的那样 - http://bl.ocks.org/harlantwood/raw/6900108/。如果您要将 SVG 附加到正文，则此方法是最好的，并且我确信在将 SVG 放置在 div 内时有一种方法可以使用此方法，但我无法找到解决方案，因此创建了上面解决问题。
于 2013-01-07T19:56:19.863 回答
2
您可以在加载页面或调整大小时调整 svg.attr("width").attr("height") ，但您需要在代码中添加其他行为以使 d3 元素随新大小而变化。
您还可以查看 svg 对象的 .viewBox 属性，该属性将动态缩放 svg 元素，但我发现它在不同浏览器中的行为参差不齐：
于 2013-01-05T21:47:43.340 回答