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

Question

任何人都知道任何允许svg元素(也包括整个内容)的js代码,具体取决于用户设置的窗口大小.我的用户希望在活动桌面上的小型自定义视图中查看d3图形.与此同时,其他人将在其活动桌面上全屏运行.这意味着图表需要根据用户的偏好自行调整大小.

Answer 1

几天前我把这个想要的行为的演示放在一起.在这里查看 - http://bl.ocks.org/4444770

基本上,您可以监听窗口的大小,对包含所有SVG元素的g元素应用比例变换,并调整父SVG的大小.在pageload和window resize上调用此代码,其中"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附加到正文中,这种方法是最好的,而且我确定在将SVG放在div中时有一种方法可以使用这种方法,但我无法找到解决方案,从而创建了上述解决.

Answer 2

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

您还可以查看 svg 对象的 .viewBox 属性，它将动态缩放 svg 元素，但我发现它在不同浏览器中的行为参差不齐：

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute