Any advice for setting width in iframes with D3? keywords: zoom, mobile, responsive

[Maggie Lee]

I'm embarking on a thing that I didn't know would be so hard:

Actually deploying D3 graphics online via iframe. 

I'm doing some graphics for a client who puts them online via iframe.  I don't have any control over the rest of his site, just my html, js and the one iframe tag that goes around my stuff.

How should I set the width of the graphics?  What's the best practice for display on all kinds of screens?  Should I hardcode iFrame width = "100%" ? 

Normally, yeah, my own design isn't very responsive. I do something like this:

<iframe width="500px">

...

<div id="chart">

....

w = window.innerWidth

...

svg = d3.selectAll("#chart").append("svg")

      .attr("width", w - margin.left - margin.right)

     ...

However, this gives me nice display on desktop and on mobile; and zoom works on mobile.

Nothing near so nice happens on this other guy's site. It is especially hurtful that zoom doesn't work; though that _may_ be a feature of his site and unfixable by me.

Indeed, no matter what I do, it seems his iframe displays my graphics at 300 px wide regardless --- seems to default to mobile width.

The graphics are designed to look good at 300 px, and they do!  But I would rather iframe take me seriously when I say w = window.innerWidth

So, when you are working in an actual production environment, with a zillion ads and cookies and who knows what in the other iframes around you, what's the best way to set the width of a graphic??

Best,

-Maggie

[Curran]

Hi Maggie,

I have encountered something similar. You can use CSS to set the width and height of your chart div to be 100% of the iFrame size, so it fits to the edges no matter what size the iFrame actually is. This allows the parent page to set the size of the iFrame. You can extract the size computed by CSS using the clientWidth and clientHeight DOM properties.

Here's a working code example that computes size dynamically in this way. Notice how it correctly fits inside the bl.ocks.org iFrame, but the size of that is nowhere hard-coded. Here's a variant that responds to browser resize (try it full screen then resize the browser).

Best regards,

Curran