Skip to content

Instantly share code, notes, and snippets.

@by12380

by12380/Responsive svg in d3.md

Created December 6, 2018 23:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save by12380/2de291d5d4c8b12b6cb0531fcca2756f to your computer and use it in GitHub Desktop.
Save by12380/2de291d5d4c8b12b6cb0531fcca2756f to your computer and use it in GitHub Desktop.
Download ZIP
Code for responsive svg in d3
Raw
Responsive svg in d3.md

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment