使图表的大小适应其外部容器

Question

我想在我的网页中嵌入this choropleth。这是一个有效的plunker。

目前，SVG的大小由<svg width="960" height="600"></svg>确定。如果我们将其更改为例如<svg width="200" height="200"></svg>，我们将看到地图被部分显示，并且地图的实际缩放不会改变。

但是，我想让这个图表始终适应其外部容器的大小。例如，对于这个plunker，我希望图表的宽度与右面板的宽度相同。

有谁知道如何修改d3代码来实现这个目标？

PS：另一种可能性是让<svg width="960" height="600"></svg>离开它，但缩放/压缩整个svg以适应其外部容器的宽度。我不知道它是否可行......

Answer 1

不幸的是不可能来设置<iframe>内容的样式，除非您可以控制<iframe>中加载的页面，因为 {{3} }

您需要在页面上设置SVG样式：

svg {
  max-width: 100%;
  max-height: 100%;
}

如果您无权访问该页面，那么您只能设置<iframe>元素的样式。

希望这有帮助！ ：）