twitter-bootstrap - 带有 D3 的美国热图在 IE 中大小不正确

Question

我正在为我的应用程序(使用 Bootstrap)创建美国的热图，在 Chrome 和 FireFox 中， map 的大小正确地适合它所在面板的宽度，并按比例调整高度。然而，在 Internet Explorer 中，它只有 150 像素高。

在 Chrome 和 FireFox 中调整窗口大小会导致图像变大/变小。在 IE 中，如果您将窗口设置得足够小，图像会缩小，但不会增加到超过最初的 150 像素高。

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>

map 是用这段代码绘制的(json变量在别处设置):

function DrawMap(data) {
    projection = d3.geo.albersUsa()
        .scale(1000)
        .translate([0, 0]);

    path = d3.geo.path()
        .projection(projection);

    svg = d3.select("#Map")
        .append("svg")
        .attr("class", "map")
        .attr("viewBox", "0 0 " + width + " " + height);

    svg
        .append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height)
        .on("click", click);

    g = svg
        .append("g")
        .attr("transform", "translate(495, 230)")
        .append("g")
        .attr("class", "states");

    states = g.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("name", function(d) { return "path-" + d.properties.abbr; })
        .style("fill", "#fff")
        .on("click", click);
    labels = g.selectAll("text")
        .data(json.features)
        .enter()
        .append("text")
        .attr("transform", function (d) { return "translate(" + path.centroid(d) + ")"; })
        .attr("name", function (d) { return 'label-' + d.properties.abbr; })
        .attr("dx", function (d) { return d.properties.dx || "0"; })
        .attr("dy", function (d) { return d.properties.dy || "0.35em"; })
        .on("click", click)
        .text(function (d) { return d.properties.abbr; });
}

我创建了一个显示行为的 fiddle (为简单起见，我删除了 AK 和 HI，并删除了 VA，因为出于某种原因，它导致了 fiddle 中的渲染问题，而这在我的应用程序中没有发生 - 没有不过改变行为):

http://jsfiddle.net/Nf3Jy/ (要查看我正在尝试解决的问题，您需要使用 IE)

在我们的应用程序中，我们使用 knockout 并获取热图数据，但为了简单起见，我删除了它(只是解释一下，以防您想知道为什么某些代码比示例中必须的代码更复杂)。

请帮我弄清楚如何在 IE 中正确调整大小。我尝试在绘制图表和调整窗口大小后运行以下命令:

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

这确实会导致它在浏览器中调整大小/调整大小，但我不喜欢它有两个原因 - 它在 Chrome 和 FireFox 中不是必需的，并且当您最大化和恢复时它不起作用。在最大化时它会正确重绘，但在恢复时我猜测调整大小事件会在窗口更改之前触发(？)所以你会看到一个白色框， map 应该在你再次调整大小之前，此时它会正确重绘。

Answer 1

你必须使用这样的东西:

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