任何人都知道任何允许svg元素(也包括整个内容)的js代码,具体取决于用户设置的窗口大小.我的用户希望在活动桌面上的小型自定义视图中查看d3图形.与此同时,其他人将在其活动桌面上全屏运行.这意味着图表需要根据用户的偏好自行调整大小.
解决方法
几天前我把这个想要的行为的演示放在一起.在这里查看 –
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内部,但我无法找到解决方案,从而创造了上述工作.
