title: sync d3.js map and leaflet map
body: <p>In one application I have both d3 map and leaflet map, I follow Mike's code to sync them(<a href="http://bost.ocks.org/mike/leaflet/" rel="nofollow">http://bost.ocks.org/mike/leaflet/</a>) and draw svg points on leaflet map. The problem is that some points being cutoff at the edge of SVG container, and other SVG elements added later on (an animated pulse in this case) will only partially shown. I wonder if there's anyway to expand the SVG container based on the features (points) bound.</p>
  
  <p>a working demo is here: <a href="http://xqin1.github.io/usschools/usac_school_stat.html" rel="nofollow">http://xqin1.github.io/usschools/usac_school_stat.html</a>, to reproduce the issue:
  1. select the 'Number of Students' slider bar to 5300-6545, the two points on Leaftlet map only half shown.
  2. click the first table row, map will zoom to the point, but the animated pulse being cut off.</p>
  
  <p>Any suggestions are highly appreciated.</p>
  
  <p>thanks
  xiaoming</p>