Advice: how to size-to-fit

[mattgodbolt]

Most reveal objects support a "size to fit" / "stretch", e.g. <img> tags.

I'd love to get my d3 iframe resized to fit the available space. Is this something that can be achieved? Directly embedding the <svg> instead of via an <iframe> seems to afford this ability, but of course that's not possible using this plugin.

Any advice? Thanks!

[gcalmettes]

By default the embedded iframe takes the full with of its container. But if your d3 visualization is not reactive to window's size changes, then the d3 visualization inside the iframe, whatever the iframe size will be, will always have the same size (so if you actually resize your browser page too much you'll crop the d3 visualization inside).

You can achieve a "fit to available space" effect by making your d3 visualization fit the window's width (which will be the embedded iframe) and making it reactive to a resize.

See this block for an example of pattern that can lead to this effect (this is the raw view so you can resize the window, see the code at this page, in particular the window.addEventListener('resize', render); bit that redraw the chart when the window is resized).

You can control the size/width of the iframe by adding the data-style="width: 100%; height: 100%" attribute to the div you are embedding the visualization in (if you want to be sure it will take the full available size).

[gcalmettes]

To add a bit more to my previous comment, in the demo, the globe is reactive (opens this slide in a browser and resize the window) as the width and height are dependent of the window's size, while the second slide (this slide) is not and the d3 visualization won't move and will be cropped when your resize.

[mattgodbolt]

Thanks for the info; I'll try making my d3 reactive! You see from my other bug though that I'm having other troubles setting the size :)

[mattgodbolt]

Thanks: that worked perfectly. Feel free to close this.