search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Make it responsive #13

Closed juliocastrop closed 8 years ago

juliocastrop commented 11 years ago

Hi, I'm trying to implement the map with bootstrap (to make it responsive) but without success so far, any idea?


<div class="container">
   <h2>Interactive Map</h2>
<div class="row">

<div class="span12">
<div id="container1">

</div>
</div>
</div>
</div>
markmarkoh commented 11 years ago

I think Github might have eaten your example code, I just see 3 closing divs. Can you post more of the example?

juliocastrop commented 11 years ago

Basically, I'm using the USA map and putting it into a span12 (bootstrap class), but I want to know if you have any idea of how to make it responsive, should we update the svg as well?

markmarkoh commented 11 years ago

When datamaps renders, it will take the height/width of the container DIV. In your case, #container1's width will match span12 (which bootstrap will make responsive), but the height of #container1 will be 0px.

Can you inspect the actual output and see what the width/height attributes of the SVG element are after your try to render?

mg1075 commented 10 years ago

FWIW... One approach for a responsive datamap is described here, but I find it takes away interactivity and makes the legend disappear. https://braddworak.com/editorials/computing/responsive-svg-graphics/