用JavaScript和D3调整大小的可调整大小的SVG元素

Question

有没有人知道任何JavaScript代码可以根据用户设置的窗口大小调整SVG元素（包括整个内容）的大小。我的用户将希望在其活动桌面上以小定制视图查看D3图形。同时，其他人将在其活动桌面上全屏运行它。这意味着图表将需要根据用户的喜好自动调整大小。

- DataDancer

---

不确定在D3中如何操作，但是Raphael可以轻松缩放SVG，请看这里：https://dev59.com/Qm855IYBdhLWcg3weUMQ - Richard

Answer 1

我几天前制作了一个演示所需的行为。在这里查看-http://bl.ocks.org/4444770

基本上，您监听窗口的大小，对包裹所有SVG元素的g元素应用比例变换，并调整父SVG的大小。在页面加载和窗口调整时调用此代码，其中“container”是包含SVG的div。

d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
$("svg").height($("#container").width()*0.618);

如果您的SVG位于一个div中，这是一个很好的方法。

另一种方法是使用SVG viewBox，Mike Bostock在此处演示- http://bl.ocks.org/harlantwood/raw/6900108/。如果您要将SVG添加到body中，那么此方法最好，我相信有一种方法可以在将SVG放入div中时使用此方法，但我找不到解决方案，因此创建了上述解决方法。

- jczaplew

Answer 2

你可以在页面加载或调整大小时调整svg.attr("width").attr("height")，但你需要在代码中添加额外的行为才能使d3元素随新大小更改。

你还可以查看svg对象的.viewBox属性，它将动态缩放svg元素，但我发现它在不同浏览器之间的行为不稳定： http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

- Elijah