10

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

Jean
  • 151
  • 1
  • 2
  • 12
  • Can you prepare a (small) fiddle showing the effect? – Sirko Jun 21 '15 at 22:04
  • Here you go https://jsfiddle.net/4p73n364/ – Jean Jun 21 '15 at 22:14
  • I can see the problem, but I'm not able to fix myself. However, the solution proposed by http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ seems to work. Example visible at http://tympanus.net/Tutorials/ResponsiveSVGs/index4.html – Sirko Jun 21 '15 at 22:32
  • looks like the issue was the use of globals for outerWidth, outerHeight and the width and height uses for the axis. Seems like Chrome treats the globals differently than the other browsers, probalby some namespacing issue – Jean Jun 21 '15 at 23:00

4 Answers4

6

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.

Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
1

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

style='width:100vw; height:100vh;'
Danh
  • 5,916
  • 7
  • 30
  • 45
nosignon
  • 11
  • 1
0

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 = d3.select("#someid")
            .append("svg")
            .attr("width", "100%")
            .attr("height", "100%")
            .attr("id", "yourid")
            .attr("viewBox", "750 0 2500 2500");
kwoxer
  • 3,734
  • 4
  • 40
  • 70
0

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

<svg version="1.1" width="1936px" height="1056px" viewBox="0 0 1936 1056" >
Oliver Sober
  • 1