full window visualisation with d3.js

Question

I'm using d3.js for a diagram. I want it to fill the whole window, no margin, no scrollbar, full height and full width. I don't necessary want it to be responsive.

Here is my failed attempt :

CSS:

body {
   margin: 0;
}

JS :

var width = window.innerWidth,
    height = window.innerHeight;

var svg = d3.select("#d3").append("svg")
    .attr("width", width)
    .attr("height", height);

HTML :

<body id="d3">    
    <script src="scripts/d3.js"></script>
    <script src="scripts/app.js"></script>
</body>

On chrome both toolbars are displayed (the generated SVG is actually slightly bigger than the body).

Edit : second attempt, works in chrome, height still incorrect in IE :

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
    height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

and :

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

(Credit to : Get the browser viewport dimensions with JavaScript)

PS : this is pure madness

2nd edit : : window.innerWidth and window.innerHeight works (at least in chrome and ie11). If you are also banging your head against the wall note that the element inspector report a wrong value for the height ... I checked the height and width of the viewport with an image editor and they match with window.innerWidth and window.innerHeight.

score 1 · Accepted Answer · answered Jun 17 '15 at 01:05

1

I think you'll find that your scrollbars move about the width/height of the scrollbars themselves. Easy fix is:

body {
  margin: 0;
  overflow: hidden;
}

Example here.

answered Jun 17 '15 at 01:05

Mark

106,305
20
172
230

this does hide the scrollbars, but the SVG is still taller than the body if you look at it with the element inspector. – Christophe Le Besnerais Jun 17 '15 at 11:31
forget about my previous comment, the element inspector report a wrong value for the height :( – Christophe Le Besnerais Jun 17 '15 at 21:33

full window visualisation with d3.js

1 Answers1