使用D3时,IE11不接受SVG高度和宽度

Question

我正在使用以下设置响应式SVG

    outerHeight = 400;
    outerWidth = 600;

    var margin = {top: 20, right: 20, bottom: 30, left: 40},        
         width = outerWidth - margin.left - margin.right,
         height = outerHeight - margin.top - margin.bottom;

    var svg = d3.select("div#simulation-1")                 
        .append("svg")  
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 "+outerWidth+" "+outerHeight)
        .attr("class","svg");

这在Chrome中完美运行.但是在IE11和Firefox中,整个图表按比例缩小(轴和字体很小),而viewBox的值是

viewbox="0 0 1936 1056"

由于某种原因,它不接受指定的高度和.但它仍然是反复无常的.

包括小提琴:https://jsfiddle.net/4p73n364/

任何的想法？问候,让

Answer 1

IE有一个错误,如果你不提供宽度和高度,它不会正确缩放SVG.

要解决该问题,您可以使用该<canvas>技巧.

https://jsfiddle.net/4p73n364/12/

我不是d3用户,所以我无法帮助你处理小标签问题.