I got it working in the IE in the following way:

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

The style was appended with a js-script. Here a very very old version of one of my projects: link.

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


Try this. For me it fixed it for IE and Chrome:

<svg version="1.1" width="1936px" height="1056px" viewBox="0 0 1936 1056" >


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

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


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.

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

Related Query

More Query from same tag