在IE10中SVG缩放问题（扩展超过SVG大小）

Question

用d3.js制作地图，缩放选项如下：http://bl.ocks.org/mbostock/4699541。在IE10中进行测试时，发现地图在缩放时会展开为整个页面。我试图添加额外的<div>，但它没有奏效。任何想法如何解决这个问题？

现在我有这样的代码：

var mapWidth = 500, 
mapHeight = 260; 

var projection = d3.geo.albersUsa() 
.scale(550) 
.translate([mapWidth/2, mapHeight/2]); 

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

var svgDiv = d3.select("body").append("div") 
.attr("width", mapWidth) 
.attr("height", mapHeight) 
.attr("class", "svgDiv"); 

var svgMap = svgDiv.append("svg") 
.attr("width", mapWidth) 
.attr("height", mapHeight); 

var svgBack = svgMap.append("rect") 
.attr("width", mapWidth) 
.attr("height", mapHeight) 
.attr("pointer-events", "all") 
.style("fill", "none") 
.on("click", reset); 

Answer 1

添加.attr（ “溢出”， “隐藏”），以解决SVG的问题，在使用<div>没有必要。

工作的代码看起来如此：

var mapWidth = 500, 
mapHeight = 260; 

var projection = d3.geo.albersUsa() 
.scale(550) 
.translate([mapWidth/2, mapHeight/2]); 

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

var svgMap = d3.select("body").append("svg") 
.attr("overflow", "hidden") 
.attr("width", mapWidth) 
.attr("height", mapHeight); 

var svgBack = svgMap.append("rect") 
.attr("width", mapWidth) 
.attr("height", mapHeight) 
.attr("pointer-events", "all") 
.style("fill", "none") 
.on("click", reset);