Databases
StackOverflow2013
Postsdbo
POd3.js Map (<svg>) Auto Fit into Parent Container and Resize with Window
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POd3.js Map (<svg>) Auto Fit into Parent Container and Resize with Window
    text
    copied!<p><strong>UPDATE: I have posted and accepted a fully working solution in the answers section. Any code in this section is to be used as reference for comparison to your own NON-WORKING code, but is not to be used as the solution.</strong></p> <hr> <p>I'm building a dashboard and using d3.js to add a world map that will plot tweets in real time based on geo location.</p> <p>The <em>world.json</em> file referenced in the d3.json() line is downloadable <strong><a href="https://bitbucket.org/john2x/d3test/src/2ce4dd511244/d3/examples/data?at=default">HERE</a></strong> (it's called <em>world-countries.json</em>).</p> <p><img src="https://i.stack.imgur.com/rGiBp.png" alt="enter image description here"></p> <p>The map is on the page as an SVG container and is rendered using d3.</p> <p>Below are the relevant code slices. </p> <pre><code>&lt;div id="mapContainer"&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="500"&gt;&lt;/svg&gt; &lt;/div&gt; </code></pre> <hr> <pre><code>#mapContainer svg { display:block; margin:0 auto; } #mapContainer path { fill:#DDD; stroke:#FFF; } </code></pre> <hr> <pre><code>// generate US plot function draw() { var map = d3.select("svg"); var width = $("svg").parent().width(); var height = $("svg").parent().height(); var projection = d3.geo.equirectangular().scale(185).translate([width/2, height/2]); var path = d3.geo.path().projection(projection); d3.json('plugins/maps/world.json', function(collection) { map.selectAll('path').data(collection.features).enter() .append('path') .attr('d', path) .attr("width", width) .attr("height", height); }); } draw(); latestLoop(); </code></pre> <hr> <pre><code>$(window).resize(function() { draw(); }); </code></pre> <p>UPDATE: I have scaled the map to an acceptable size (for my particular browser size), but it still will not scale and center when I change the size of the window. IF, however, I resize the window, then hit refresh, then the map will be centered once the page is reloaded. However, since the scale is static, it is not scaled properly.</p> <p><img src="https://i.stack.imgur.com/5pzyp.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload