title: full window visualisation with d3.js
body: <p>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.</p>
  
  <p>Here is my  failed attempt :</p>
  
  <p>CSS:</p>
  
  <pre><code>body {
     margin: 0;
  }
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>var width = window.innerWidth,
      height = window.innerHeight;
  
  var svg = d3.select("#d3").append("svg")
      .attr("width", width)
      .attr("height", height);
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;body id="d3"&gt;    
      &lt;script src="scripts/d3.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>On chrome both toolbars are displayed (the generated SVG is actually slightly bigger than the body).</p>
  
  <p><strong>Edit</strong> : second attempt, works in chrome, height still incorrect in IE :</p>
  
  <pre><code>var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
      height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  </code></pre>
  
  <p>and :</p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  </code></pre>
  
  <p>(Credit to : <a href="https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript">Get the browser viewport dimensions with JavaScript</a>)</p>
  
  <p>PS : this is pure madness</p>
  
  <p><strong>2nd edit :</strong> : window.innerWidth and window.innerHeight works (at least in chrome and ie11). If you are also banging your head against the wall note that <strong>the element inspector report a wrong value for the height</strong> ... I checked the height and width of the viewport with an image editor and they match with window.innerWidth and window.innerHeight.</p>