Make D3 v4 Charts Responsive with the viewBox attribute

Share this video with your friends

Send Tweet

Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the viewBox attribute, which is used to control how SVGs scale. We’ll also examine a reusable function that can be used to make nearly any visualization responsive.

Víctor de la Cruz
Víctor de la Cruz
~ 3 years ago

This is needlessly complex. To get the same behaviour, just remove the width and height attributes from the SVG element and you'll get a responsive or "fluid" SVG.

As described here: https://lobotuerto.com/blog/fluid-svgs-with-vuejs/

Plus65
Plus65
~ 2 years ago

Question for responsivefy function, The height won't work on a dynamic tree data.

pery mimon mimon
pery mimon mimon
~ 2 years ago

What wrong with just CSS {width:100%, height:100%} or css grid or css flex ; and if the code want to responce to resize event is much better to update the dom in requestanimationFrame