0

I want to embed this choropleth in my webpage. Here is a working plunker.

Currently, the size of SVG is fixed by <svg width="960" height="600"></svg>. If we change it to eg, <svg width="200" height="200"></svg>, we will see the map is partially shown, and the real scaling of the map does not change.

However, I want to make this chart always adjust to the size of its outer container. For example, in the case of this plunker, I want the width of the chart to be the same as the one of the right panel.

Does anyone know how to modify the d3 code to achieve this?

PS: Another possibility is to leave <svg width="960" height="600"></svg> with it, but scale/compress the whole svg to adapt the width of its outer container. I don't know if it is doable...

SoftTimur
  • 5,630
  • 38
  • 140
  • 292

1 Answers1

1

Unfortunately it is impossible to style the contents of an <iframe> unless you have control over the page loaded in the <iframe>, due to cross-domain resource restrictions.

You would need to style the SVG on the page that you are including:

svg {
  max-width: 100%;
  max-height: 100%;
}

If you don't have access to that page, then you are limited to styling the <iframe> element itself.

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Thank you, you are right that the problem is inside the SVG. And I realized that its size was fixed by ``. I modified a little bit the OP. `svg { max-width: 100%; max-height: 100%; }` does not seem to work. – SoftTimur Sep 06 '17 at 00:06
  • Apparently Internet Explorer doesn't support `max-width` on SVG elements. Can you try adding `width: 100%` and `height: 100%` instead? – Obsidian Age Sep 06 '17 at 00:09
  • I use Chrome, `width: 100%` and `height: 100%` don't work well. – SoftTimur Sep 06 '17 at 00:11
  • I see [somewhere else](https://stackoverflow.com/a/27977344/702977) using `width: 100%` as well, but I could not make it work. Could you provide a working plunker? – SoftTimur Sep 06 '17 at 04:10
  • `max-width` should indeed work, but you will need access to the page that the `
    – Obsidian Age Sep 06 '17 at 04:20
  • In this [plunker](https://plnkr.co/edit/09HQffqVaQczO0867KYO?p=preview), I added `svg { max-width: 100%; }`, it did not work at least in Chrome. – SoftTimur Sep 06 '17 at 04:35
  • The `` in your plunker is indeed contained within your `` tag; setting a width on the `` causes the `` to be contained within. Considering it's running in an ` – Obsidian Age Sep 06 '17 at 04:41