Resize svg when window is resized in d3.js

by

Look for ‘responsive SVG’ it is pretty simple to make a SVG responsive and you don’t have to worry about sizes any more.

Here is how I did it:

d3.select("div#chartId")
   .append("div")
   // Container class to make it responsive.
   .classed("svg-container", true) 
   .append("svg")
   // Responsive SVG needs these 2 attributes and no width and height attr.
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   // Class to make it responsive.
   .classed("svg-content-responsive", true)
   // Fill with a rectangle for visualization.
   .append("rect")
   .classed("rect", true)
   .attr("width", 600)
   .attr("height", 400);
.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

svg .rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div id="chartId"></div>

Note: Everything in the SVG image will scale with the window width. This includes stroke width and font sizes (even those set with CSS). If this is not desired, there are more involved alternate solutions below.

More info / tutorials:

http://thenewcode.com/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

More Related Contents:

  1. Unable to get node datum on mouseover in D3 v6
  2. What’s the best way to make a d3.js visualisation layout responsive?
  3. How can I bring a circle to the front with d3?
  4. dc.js – how to create a row chart from multiple columns
  5. D3 force layout – linking nodes by name instead of index
  6. D3 Differentiate between click and drag for an element which has a drag behavior
  7. Label outside arc (Pie chart) d3.js
  8. Where is d3.svg.diagonal()?
  9. How to draw a path smoothly from start point to end point in D3.js
  10. How are input parameters filled in javascript method chains?
  11. Load multiple files using the d3-fetch module
  12. d3.js – v3 and v4 – Enter and Update differences
  13. How to convert to D3’s JSON format?
  14. How to set multiple attributes with one value function?
  15. Plotting points on a map with D3
  16. Importing data from multiple csv files in D3
  17. D3.js – Donut charts with multiple rings
  18. d3 force directed layout – link distance priority
  19. Convert a directory structure in the filesystem to JSON with Node.js
  20. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  21. SVG to Canvas with d3.js
  22. NVD3 – How to refresh the data function to product new data on click
  23. Display an arrow head in the middle of D3 force layout link
  24. How to register multiple external listeners to the same selection in d3?
  25. Passing data from Django to D3
  26. Calculate SVG Path Centroid with D3.js
  27. draw text in d3 arc javascript
  28. D3: How do I set “click” event and “dbclick” event at the same time?
  29. Show values on top of bars in a barChart
  30. D3.js: Position tooltips using element position, not mouse position?

Leave a Comment