帶有 D3 的美國熱圖在 IE 中的大小不正確

Question

我正在為我的應用程序（使用 Bootstrap）創建美國的熱圖，在 Chrome 和 FireFox 中，地圖的大小正確地與其所在面板的寬度相符，並按比例調整高度。 然而，在 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>

地圖是用這個代碼繪制的（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; });
}

我創建了一個顯示行為的小提琴（為了簡單起見，我刪除了 AK 和 HI，並刪除了 VA，因為出於某種原因，它導致了我的應用程序中沒有發生的小提琴渲染問題 - 沒有改變行為， 盡管）：

http://jsfiddle.net/Nf3Jy/ （要查看我要修復的問題，您需要使用 IE）

在我們的應用程序中，我們使用淘汰賽並獲取熱圖數據，但為了保持簡單，我刪除了它（只是解釋一下，以防您想知道為什么某些代碼比示例中的要復雜）。

請幫我弄清楚如何在 IE 中正確調整大小。 在繪制圖表並調整窗口大小后，我嘗試運行以下命令：

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

這確實會導致它跨瀏覽器調整大小/調整大小，但我不喜歡它的原因有兩個 - 在 Chrome 和 FireFox 中沒有必要，並且在最大化和恢復時它不起作用。 在最大化時，它會正確重繪，但在還原時，我猜測調整大小事件會在窗口更改之前觸發（？），因此您會看到一個白框，地圖應該在那里，直到您再次調整大小，此時它會正確重繪。

Answer 1

你必須使用這樣的東西：

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