responsive D3 chart

by

You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element.

See this jsfiddle for the full example: http://jsfiddle.net/BTfmH/12/

var svg = d3.select('.chart-container').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
    .attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

You won’t even need a resize handler with this method.

More Related Contents:

  1. Center a map in d3 given a geoJSON object
  2. What’s the best way to make a d3.js visualisation layout responsive?
  3. Hyperlinks in d3.js objects
  4. dc.js – Listening for chart group render
  5. D3js: Automatic labels placement to avoid overlaps? (force repulsion)
  6. Styles in component for D3.js do not show in angular 2
  7. How to create SVG elements of different types based on data?
  8. d3 importing csv file to array [duplicate]
  9. Loading D3.js data from a simple JSON string
  10. Drawing Multiple Lines in D3.js
  11. Calm down initial tick of a force layout
  12. d3.js v5 – Promise.all replaced d3.queue
  13. D3: update data with multiple elements in a group
  14. Tree drawing orientation
  15. D3.zoom jumps when using mouse wheel after programmatically zoom
  16. Loading external csv file in jsfiddle
  17. D3 force directed layout with bounding box
  18. d3.js v4: How to access parent group’s datum index?
  19. How to update axis using d3.js
  20. Change the ticks on x-axis
  21. d3: make the d3.csv function syncronous
  22. Pre-projected geometry v getting the browser to do it (aka efficiency v flexibility)
  23. How to use d3.min and d3.max within a d3.json command
  24. Bar chart with negative values
  25. How to make localization on months / days for D3js?
  26. D3 force layout fix root node at the center
  27. Major and minor ticks with V3 of D3?
  28. Converting EPSG projection bounds to a D3.js map
  29. Join existing elements of the DOM to data with d3.js
  30. D3.js loading local data file from file:///

Leave a Comment