0

How do I make an svg the entire height and width of a page. The below code creates an svg with a width of 1411 and height of 150. I understand that d3 has a default height of 150. But, I am setting it in the code to 100%. How do I set it to 100% of the width and height of the page?

var svg = d3.select("body").append("svg")
    .attr("width", "100%")
    .attr("height", "100%");
hem
  • 1,012
  • 6
  • 11
jesse
  • 133
  • 1
  • 9
  • Is what you are after answered in this [previous question](https://stackoverflow.com/questions/44833788/making-svg-container-100-width-and-height-of-parent-container-in-d3-v4-instead)? [This question](https://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive) deals with the broader issue of having a responsive D3.js SVG. – mdml Jul 28 '19 at 12:48

1 Answers1

2

One very simple way to do this would be to get the window's width and height directly at the time of adding the <svg>.

d3.select('body').append('svg')
  .attr('width', window.innerWidth)
  .attr('height', window.innerHeight)

This wouldn't automatically update if the window was resized, however.

mdml
  • 22,442
  • 8
  • 58
  • 66