在 D3 中使用纬度/经度值绘制多边形答案

【问题标题】：Drawing polygons using latitude/longitude values in D3在 D3 中使用纬度/经度值绘制多边形
【发布时间】：2015-05-08 03:30:46
【问题描述】：

我有一组多边形，它们的顶点（角）的位置被定义为纬度/经度值。

我想用 D3 来画这些。我不想要任何花哨的东西（比如包含世界地图的背景等）。我唯一想做的就是绘制多边形。

我在 Google 上查找了解决方案，但我发现像 http://datamaps.github.io 或 https://github.com/mbostock/d3/wiki/Geo-Paths 这样的东西都显示了世界地图的背景或类似的东西，这是我不想做的.

欢迎提出建议。

【问题讨论】：

你提到的例子展示了世界或类似的东西，因为它在数据中。 D3 不会自动执行此操作；如果您的数据仅包含您感兴趣的多边形，则只会绘制那些。
你能展示一个非常简单的例子来说明如何使用 lat/long 来绘制一个形状吗？让我们使用一个非常简单的示例，例如一个矩形，其角为 N30 W30、N30 W31、N31 W31 和 N31 W30。
如果您的数据是 geojson 格式，那么您可以简单地将其插入到任何用于绘制地理数据的示例中。如果不是，那么使用地理功能没有任何好处，您可以使用正常的 D3 比例将坐标转换为屏幕坐标。
使用d3.scale.linear().domain([minCoord, maxCoord]).range([minScreen, maxScreen])。
将坐标解析成数据结构然后绘制：jsfiddle.net/5a8ec1dh/1

【解决方案1】：

在您的特定情况下，使用 D3 的地理功能似乎有点矫枉过正——您需要做的就是使用 D3 比例将坐标转换为屏幕坐标，即

var scale = d3.scale.linear().domain([minCoord, maxCoord]).range([minScreen, maxScreen]);

演示（基于提供的小提琴）here.

【讨论】：