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。

要解决该问题，您可以使用the <canvas> trick。

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

我不是d3用户，所以我无法帮助您解决小标签问题。

Answer 2

我们可以使用Viewport百分比作为：

，而不是有时提供unknows宽度和高度

style='width:100vw; height:100vh;'

Answer 3

我通过以下方式在IE中工作：

<svg id="yourid" width="100%" height="100%" viewBox="750 0 2500 2500">

该样式附有js脚本。这是我的一个项目的非常旧版本：link。

var svg = d3.select("#someid")
            .append("svg")
            .attr("width", "100%")
            .attr("height", "100%")
            .attr("id", "yourid")
            .attr("viewBox", "750 0 2500 2500");

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

3 个答案: