使用d3在Leaflet贴图上绘制SVG伪像是一种结合d3强度获得实体贴图 Controller 的简单方法。如何实现此目标有许多示例和指南，而两种主要方法似乎是:
第一种方法通过附加一个传单类来避免基于传单比例的缩放，这样在缩放时任何d3元素都将被隐藏。缩放动画结束后，将重新计算并重新绘制元素坐标，此后，将隐藏类移除以再次暴露元素。这种方法有效，但是与Leaflet的本地GeoJSON图层相比，其放大/缩小体验较差，因为后者支持动画缩放。
第二种方法不包含任何实现缩放行为的特定于实现的代码，但是无论如何还是可以工作的! d3元素在动画缩放期间进行缩放，然后将其整洁地替换为下一个缩放级别 vector 。
我想实现的是两者的结合。我想绘制基于Geo / TopoJSON的基于非平铺的 vector ，这些 vector 会在放大/缩小过程中进行动画处理。我摆弄各种不同的Leaflet CSS类，不同的事件挂钩以及以多种方式附加和/或重用SVG元素，但尚未实现与使用Leaflet的本地GeoJSON vector 时所经历的行为类似的行为。层。我不想使用本机层的原因是，我想利用很多其他d3功能，而这些功能根本不属于Leaflet实现的一部分。
问题:使用基于非平铺的 vector 将Leaflet和d3组合时，有人实现过动画缩放吗？如果是这样-如何？
最佳答案
示例
我认为this是我通过ZJONSSON找到的结合Leaflet和d3的最佳解决方案之一。
d3 +传单集成
在此示例中，Leaflet映射在此处为map._initPathRoot()的SVG形式启动，然后使用d3 var svg = d3.select("#map").select("svg"), g = svg.append("g");选择SVG，此后即可获得所有d3乐趣。
在此示例中，Leaflet map 事件map.on("viewreset", update);用于调用update并转换 map viewreset上的d3层。此后，d3过渡选项将确定d3层对Leaflet map pan / zoom事件的反应。
这样，您便拥有了d3 + Leaflet库的全部功能，而无需计算 map 边界等麻烦，因为Leaflet可以很好地处理它。
动画 vector 缩放
对于动画，最新的Leaflet版本包含Pan and Zoom animation选项。虽然它不像d3那样可自定义，但是您始终可以编辑Leaflet src代码来更改过渡时间! Leaflet GeoJSON vector 图层(L.geoJson)不需要在Leaflet map 事件(在update中)进行更新，因为它们已经作为SVG添加到 map 中并由Leaflet处理。
请注意，如果实现L.geoJson，这也意味着您不需要map._initPathRoot()，因为Leaflet会将图层作为SVG添加到 map 中，因此您可以对其进行d3.select。
也可以在className图层选项中添加L.geoJson变量，以便您可以通过CSS或d3.select通过在Leaflet onEachFeature期间分配的唯一类ID来为功能设置样式。