Accepted answer

A method I like to use is to wrap the code in a function (lets call it main()), and re-run when the screen size changes.

At the beginning of this new main() function, remove the old (and now redundantly sized) svg."#<id of svg>").remove();

Then, create the new y scale using

var new_width = document.getElementById("<Div ID>").clientWidth;
var new_height = document.getElementById("<Div ID>").clientHeight;

and apply these to the new svg as you create it. D3 should allow you to run the .remove() line before the initial svg has been created. Make sure to then add an id when you create the svg (using attr("id", "<id of svg>")).

After that, you can call the main() function on resizing with "resize", main() );

The way in which you want to actually size your Div will now rely on your CSS, so you can use something like {height:50vh} or whatever you like.

Hope this helps.

P.S. By the way, why are you using D3 version 3? We're up to v5 :)

Related Query