可调整大小的气泡图

Question

我正在使用D3js气泡图示例（https://bl.ocks.org/mbostock/4063269）并且无法使图表调整大小以适合当前页面。我该怎么做？

<svg viewBox="0 0 300 300"></svg>
<svg preserveAspectRatio="xMidYMid meet"></svg>

Answer 1

Hello Harrison和Gerardo，

我创建了一个块，它使用bootstrap来演示同一图表的视图框功能。

该块的链接是： - https://bl.ocks.org/tejaser/c69f2f20cec53dd166dcb26ca43c2ae9/d57b7c6898fae90d586df16459730cc2226b4740

我已经在两个不同的行中使用8-4和6-6列拆分来显示SVG如何修改自身以保持基于容器的纵横比。我在示例中使用了“xMinYMin meet”，将其替换为“xMidYMid meet”对最终输出没有影响。

Answer 2

您希望此SVG可以扩展并保留填充其容器的宽高比吗？确保SVG设置为＆＃34; display：block＆＃34;并尝试使用： preserveAspectRatio =＆＃34; xMidYMin meet＆＃34;