1

I have a D3.js component and it renders a chart dynamically based on the data received. My problem is that when I receive huge sets of data my component grows (I have predefined sizes for each visual element) and I don't want to refactor my component and compute the sizes for all my elements in order to fit the screen.

Ioan Ungurean
  • 319
  • 1
  • 15

1 Answers1

1

SVG attribute preserveAspectRatio indicates whether or not to force uniform scaling.

xMinYMin - Force uniform scaling. Align the of the element's viewBox with the smallest X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport.

<svg preserveAspectRatio="xMinYMin" viewBox="0 0 300 100"></svg>

Note viewBox as opposed to width and height attributes.

ksav
  • 20,015
  • 6
  • 46
  • 66
  • I already added `preserveAspectRatio` and `viewBox` is added dynamically on render getting the width and height of the container, but it doesn't do anything it does not scale the SVG to fit into view. – Ioan Ungurean Nov 29 '17 at 08:43
  • Better post some code then. jsfiddle, codepen, plunker, etc. The last piece of your puzzle could be a simple CSS issue – ksav Nov 29 '17 at 21:58
  • The part with the viewBox works but you will have to add it after you drawn your component and you know your component maximum width and height. Using this props you can fit your component into view. This [link](https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container) helped me a lot. – Ioan Ungurean Dec 04 '17 at 10:09