In D3.js examples a common theme that pops up is the use of a fixed size svg. I typically have to make the same set of modifications to get a resposive svg.
Here is a simple example (I hope) of said modifications. I took this original bar chart from mbostock based on D3.js v4 and split up the code to make the chart responsive when:
- Data is loaded
- The browser window / svg is resized
Open in a new window and resize to see it in action.
The original logic has been split up into SETUP, DRAWING, and LOADING DATA.
For example:
- Setting the axis range is dependent on browser/svg size, so it goes in DRAWING.
- Setting the axis domain is dependent on the data itself, so it goes in LOADING DATA.
- SETUP contains stuff that does not change (is neither size nor data dependent).