同步d3.js地图和传单地图 [英] sync d3.js map and leaflet map

问题描述

在一个应用程序中，我同时拥有d3映射和传单映射，我按照Mike的代码进行同步( http://bost.ocks.org/mike/leaflet/)，然后在传单地图上绘制svg点.问题在于，某些点在SVG容器的边缘处被切除，而稍后添加的其他SVG元素(在这种情况下为动画脉冲)将仅部分显示.我想知道是否有根据绑定的特征(点)扩展SVG容器的方法.

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.

一个有效的演示程序在这里: http://xqin1.github.io/usschools/usac_school_stat.html ，以重现该问题:1.选择学生人数"滑杆到5300-6545，Leaftlet地图上的两个点仅显示一半.2.单击表格的第一行，地图将缩放到该点，但动画脉冲被截断.

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.

谢谢小明

推荐答案

我也遇到了这个问题，并找到了解决方案.引用mbostock的示例代码您只需要在每次调用重置时计算的预计边界框中添加一些填充:

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] 

这篇关于同步d3.js地图和传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！