by12380/Responsive svg in d3.md

Created December 6, 2018 23:38

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/by12380/2de291d5d4c8b12b6cb0531fcca2756f.js"></script>
Save by12380/2de291d5d4c8b12b6cb0531fcca2756f to your computer and use it in GitHub Desktop.

Code for responsive svg in d3

Raw

Append the following code immediately after .append("svg") to the SVG you want to be responsive.

.attr("preserveAspectRatio", "xMidYMid meet")
.attr("viewBox", `0 0 ${width} ${height}`)
.append("g").attr("width", width).attr("width", height)

width refers to the width of your SVG (prior to being responsive)

height refers to the height of your SVG (prior to being responsive)

Ex. let width = 960, height = 500;

Select an option