javascript - 在传单中使用 d3

Question

这是 my other one 的后续问题.

http://fiddle.jshell.net/zw8TR/16/

我已经成功地利用 d3 来可视化 map 标记之间的路线。我用过this example由迈克·博斯托克 (Mike Bostock) 作为指导。

我使用 d3 而不是 Polyline 中内置的 Leaflet 的原因是因为我想尝试使用 d3 的插值来平滑某些路线，并为其他路线创建弧线(用于飞行路线)。 在现阶段，我只是想找到一种方法让这些方法适用于所有路线。

我见过的例子只使用interpolate()方法 d3.svg.line() ，而 Leaflet 集成要求我使用 d3.geo.path() 。我的代码中是否有地方可以将此方法与 d3.geo.path() 一起使用？

另一个可能helpful link .

和another .

感谢您的帮助。

Answer 1

这样做比使用 d3.geo.path 有点困惑，因为它已经实现了 map 所需的所有样板功能，但这当然是可能的。这个想法是从地理路径中提取用户坐标列表，并将其转换为 line 函数中的屏幕坐标。此转换可以在该行的 .x() 和 .y() 函数中完成。

var path1 = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).x; })
        .y(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).y; });

现在我们只需要从特征中提取坐标即可。

feature.attr("d", function(d) { return path1(d.geometry.coordinates); });

完整示例 here .