Twitter bootstrap 美国热图，D3不'；在IE中正确地调整大小

我正在为我的应用程序（使用Bootstrap）创建一个美国热图，在Chrome和FireFox中，热图的大小与它所在面板的宽度正确匹配，并按比例调整高度。然而，在InternetExplorer中，它只有150px高

在Chrome和FireFox中调整窗口大小会导致图像增大/缩小。在IE中，如果使窗口足够小，图像将缩小，但其大小不会超过最初的150px高

html如下所示：

<div class="container">
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Map</h3>
                </div>
                <div class="panel-body">
                    <div id="Map"></div>
                </div>
            </div>
        </div>
    </div>
</div>

我创建了一个显示该行为的提琴（为了简单起见，我删除了AK和HI，删除了VA，因为出于某种原因，它在提琴中导致了一个渲染问题，而我的应用程序中没有出现该问题-但没有改变该行为）：

（若要查看我试图解决的问题，您需要使用IE）

在我们的应用程序中，我们使用knockout并获取热图数据，但为了保持简单，我删除了它（只是解释一下为什么有些代码比示例中的代码更复杂）

请帮助我找出如何在IE中使其正确大小。在绘制图表和调整窗口大小后，我尝试运行以下操作：

$('#Map').height($('#Map').width() * height / width);

---

这确实会导致它跨浏览器调整大小，但我不喜欢它有两个原因——在Chrome和FireFox中不需要它，而且当你最大化和恢复时它不起作用。在最大化时，它会正确地重新绘制，但在还原时，我猜在窗口更改（？）之前会触发调整大小事件，因此在再次调整大小之前，您会看到一个白色框，在该框中地图应该位于该位置，此时它会正确地重新绘制。

您必须使用类似以下内容：

div#us-chart
{
transform:scale(.35,.35);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(.35,.35); /* Safari and Chrome */
}

---

我试着把它加到小提琴上，但这只会让它看起来很奇怪<代码>#映射{转换：缩放（.35.35）；-ms转换：缩放（2,4）；/*IE 9*/-webkit转换：缩放（.35.35）；/*Safari和Chrome*/}

div#us-chart
{
transform:scale(.35,.35);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(.35,.35); /* Safari and Chrome */
}