sync d3.js map and leaflet map

问题

In one application I have both d3 map and leaflet map, I follow Mike's code to sync them(http://bost.ocks.org/mike/leaflet/) 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.

a working demo is here: http://xqin1.github.io/usschools/usac_school_stat.html, 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.

Any suggestions are highly appreciated.

thanks xiaoming

回答1:

I had this problem as well, and found a solution. Referencing mbostock's sample code you just need to add a little bit of padding to the projected bounding box that is calculated each time reset is called:

   var bottomLeft = project(bounds[0]),
       topRight = project(bounds[1]);

Insert something like this (just after the above declarations):

   var padding = 25;  // In pixels, choose large enough to prevent edge clipping
                      // of your largest element

   bottomLeft = [bottomLeft[0]-padding, bottomLeft[1]+padding]
   topRight = [topRight[0]+padding, topRight[1]-padding] 

来源：https://stackoverflow.com/questions/16321145/sync-d3-js-map-and-leaflet-map