What’s the best way to make a d3.js visualisation layout responsive?

by

There’s another way to do this that doesn’t require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg> element:

<svg id="chart" viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid meet">
</svg>

Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox, so you may not need to keep the chart’s size up to date. If you need to support older browsers, you can resize your element when the window resizes like so:

var aspect = width / height,
    chart = d3.select('#chart');
d3.select(window)
  .on("resize", function() {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
  });

And the svg contents will be scaled automatically. You can see a working example of this (with some modifications) here: just resize the window or the bottom right pane to see how it reacts.

More Related Contents:

  1. Height equal to dynamic width (CSS fluid layout) [duplicate]
  2. Unable to get node datum on mouseover in D3 v6
  3. How to add a tooltip to an svg graphic?
  4. dc.js – how to create a row chart from multiple columns
  5. D3 force layout – linking nodes by name instead of index
  6. jQuery: How to detect window width on the fly?
  7. D3 Differentiate between click and drag for an element which has a drag behavior
  8. Label outside arc (Pie chart) d3.js
  9. Where is d3.svg.diagonal()?
  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. Display an arrow head in the middle of D3 force layout link
  23. How to register multiple external listeners to the same selection in d3?
  24. Appending multiple non-nested elements for each data member with D3.js
  25. Calculate SVG Path Centroid with D3.js
  26. Change and transition dataset in chord diagram with D3
  27. Using d3 to shade area between two lines
  28. D3: How do I set “click” event and “dbclick” event at the same time?
  29. D3 Tree Layout Separation Between Nodes using NodeSize
  30. How to get the total depth of an unknown JSON hierarchy?

Leave a Comment