d3 墨卡托、地理和路径方法

Question

我在 d3 上关注本教程：

在其中，我看到了这段代码：

var projection = d3.geo.mercator()
    .scale(500)
    .translate([width / 2, height / 2]);

同样路径生成器：

var path = d3.geo.path()
    .projection(projection);

这些方法到底在做什么？这些 d3 方法有好的文档吗？在 d3 文档上。它说：

"#d3.geo.mercator()

"The spherical Mercator projection is commonly used by tiled mapping libraries (such as OpenLayers and Leaflet). For an example displaying raster tiles with the Mercator projection, see the d3.geo.tile plugin. It is conformal; however, it introduces severe area distortion at world scale and thus is not recommended for choropleths."

所以d3.geo.mercator只是一种地图设计吗？

Answer 1

地图投影只是将点从一个系统（sphere/ellipsoid 基于 latitude/longitudes）转换到另一个系统（具有 x/y 值的二维笛卡尔平面）。

墨卡托是一种（非常常见的）方法。有关地图投影的更多信息，请查看 http://en.wikipedia.org/wiki/Map_projection。

使用您发布的代码，它设置了一个墨卡托投影，当传递一个 [long, lat] 点时，它将 return 一个 [x, y] 对应于 x 和可以在 svg 或 canvas 上绘制的 y 位置。在这种情况下，它将以 [width/2, height/2].

为中心

路径生成器是一些 d3 "magic"，它将点列表转换为 svg path 字符串。 svg 有自己的 "language" 路径，您可以在 http://www.w3.org/TR/SVG/paths.html 找到更多信息，但这确实很技术性。

由于 svg 使用像素坐标，并且大多数地理数据都参考 lat/long，因此投影功能可以让您轻松地从一个转换到另一个，然后再转换回来。

由于在地图上绘制路径非常常见 activity，d3 包含投影路径生成器 "aware" 并将自动将指定的投影应用到您指定的任何数据传递给路径生成器，这将导致像素坐标得到returned，然后将其转换为上面提到的path "language"，然后可以显示在svg 元素。

d3 墨卡托、地理和路径方法

d3 mercator, geo, and path methods

d3.js