CODEWITHSUNDEEP
d3.jssvg
jesse
jesse

Reputation: 133

Make D3.js width and height 100%

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%");

Upvotes: 0

Views: 2476

Answers (1)

mdml
mdml

Reputation: 22882

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.

Upvotes: 3

Related Questions