Question

在一个应用程序中，我同时拥有d3地图和传单地图，我按照Mike的代码同步它们（http://bost.ocks.org/mike/leaflet/）并在传单地图上绘制svg点。问题是某些点在SVG容器的边缘处被切断，并且稍后添加的其他SVG元素（在这种情况下是动画脉冲）将仅部分地显示。我想知道是否还有基于绑定的功能（点）来扩展SVG容器。

这里有一个工作演示：http://xqin1.github.io/usschools/usac_school_stat.html，重现问题： 1.选择'学生数'滑块到5300-6545，在Leaftlet地图上的两个点只显示一半。 2.单击第一个表格行，地图将缩放到该点，但动画脉冲被切断。

非常感谢任何建议。

感谢明

Answer 1

我也有这个问题，并找到了解决方案。引用mbostock的sample code，您只需要在每次调用重置时计算的投影边界框中添加一点填充：

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

插入这样的东西（就在上面的声明之后）：

   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地图和传单地图

1 个答案: