IE11 does not accept SVG height and width when using D3

Question

I am using the following to setup a responsive 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");

This works perfectly in Chrome. In IE11 and Firefox however the whole chart is scaled down (axis and font are tiny) and the value for the viewBox is

viewbox="0 0 1936 1056"

For some reason it does not accept the specified height and with. However it still is reponsive.

Included fiddle: https://jsfiddle.net/4p73n364/

Any idea? Regards, Jean

Answer 1

IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.

To fix that issue, you can use the <canvas> trick.

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

I'm not a d3 user, so I can't help you with the tiny labels issue.

Answer 2

Instead of providing sometimes unknows widths and heights we can use Viewport percentage as:

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