且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在单张中使用d3

更新时间:2023-01-08 16:02:47

这样做比使用 d3.geo.path ,因为它已经实现了地图所需的所有样板功能,但这当然是可能的。这个想法是从地理路径中提取用户坐标列表,并将它们转换为函数中的屏幕坐标。这个翻译可以在 .x() .y() >

Doing this is a bit messier than using d3.geo.path because that already implements all the boilerplate functionality you need for maps, but it's certainly possible. The idea is to extract the list of user coordinates from the geo path and translate them to screen coordinates in the line function. This translation can be done in the .x() and .y() functions of the line.

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; });

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

Now we just need to extract the coordinates from the feature.

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

完成示例此处