Internet Explorer Scaling无法正常工作

Question

我有一个用d3创建的地图。我将它设置为父div的宽度（带有id贴图）和高度，宽度为5/9到宽度。 viewBox已设置为＆＃34; 0 0宽度高度＆＃34;。

以下是设置：

var width = $("#map").width(),
    height = width * 500 / 900,
    active = d3.select(null);


var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);


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


projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);

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

svg = d3.select("#map").append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", "0 0 " + width + " " + height)

g = svg.append("g");

以下是Chrome中的效果：

但它在IE中看起来像这样：

缩放完全搞砸了。我相信它与viewBox有关。有人可以解释如何解决这个问题吗？

谢谢！

Answer 1

您遇到的问题是Chrome和IE对height: "100%"的处理方式有所不同。您已巧妙地将height变量设置为基于width和宽高比，但要利用此功能，您需要在设置svg的尺寸时使用这些值以及viewBox：

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