半径以英里为单位的 D3 Topojson 圆

Question

（假设现有的投影/topojson）

我要做的是在半径 (r) 以英里为单位的点 ([long,lat]) 创建一个圆。我知道这有一个 d3.geo 函数，但经过一番考虑，我认为它与我的特定应用程序不太兼容。

所以现在我正在寻找使用原生 svg circle 解决方案，其中 cx 和 cy 是纬度和经度，r 是以英里为单位的半径。我知道 cx 和 cy，但我不知道如何确保 r 是 15 英里。所以主要是如何确保在像素空间中绘制半径时以英里为单位。一定有办法使用projection 函数来设置半径的适当比例。但我在实践中还没有看到过。

另外我应该指出，我的投影是动态的，取决于用户事件，投影（包括比例）可以改变。因此，我不确定这是否会影响圆圈在现有投影的上下文中的缩放方式，但我认为为了安全起见，我会披露这一点。

Answer 1

为什么不使用内置的圆圈生成器d3.geoCircle()？

返回一个“多边形”类型的新 GeoJSON 几何对象，该对象近似于球体表面上的一个圆，当前为 center、radius 和 precision。任何参数都会传递给访问器。

剩下的唯一任务就是计算圆的半径（以度为单位）。因为地球不是一个完美的球体，所以这本身就很具有挑战性。但是对于许多应用来说，一个近似值就足够了。仅考虑 3,958 英里 的mean radius，计算可写为：

var EARTH_RADIUS = 3959;                         // mean radius in miles
var radiusMi     = 5;                            // radius to be drawn in miles
var radiusDeg    = radiusMi / EARTH_RADIUS * 90; // radius in degrees for circle generator

然后可以将其传递给圆生成器：

var circle = d3.geoCircle().radius(radiusDeg);

最后，圆生成器用于通过数据绑定将其输出传递到考虑投影的适当路径生成器：

svg.append("path")
  .datum(circle)
    .attr("d", path);

看看这个Block，它在全球不同的位置都有半径为 50 英里的圆圈。圆形生成器与投影相结合将控制正确的大小和正确的圆形外观。

---

D3 v3

如果您仍然坚持使用 D3 v3，则该示例也适用。但是，您需要相应地调整names：

• d3.geo.circle ↦ d3.geoCircle

除此之外，圆生成器的一些方法已被重命名：

• circle.origin() ↦ circle.center()
• circle.angle() ↦ circle.radius()

将这些调整应用于我上面链接的块，这也适用于 v3：v3 Block。

---

当涉及到严重扭曲的异常投影时，这种方法可以发挥其优势。只需将块中的投影更改为d3.geoGnomonic()，就可以很容易地看到它。更新后的Block 的以下屏幕截图仍然显示与上述相同的圆圈，每个圆圈的半径为 50 英里：