javascript - D3 Topojson 圆，半径以英里为单位

Question

(假设现有投影/topojson)

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

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

此外，我应该指出，我的投影是动态的，根据用户事件，投影(包括比例)可能会发生变化。因此，我不确定这是否会影响现有投影背景下圆的缩放方式，但为了安全起见，我想我会透露这一点。

Answer 1

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

Returns a new GeoJSON geometry object of type “Polygon” approximating a circle on the surface of a sphere, with the current center, radius and precision. Any arguments are passed to the accessors.

留给您的唯一任务是计算圆的半径(以度为单位)。因为地球不是一个完美的球体，这本身就是一个相当大的挑战。但对于许多应用来说，近似值就足够了。只取 mean radius考虑到 3,958 英里，计算结果可写为:

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

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

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

看看这个 Block其特点是在全局不同位置都有半径为 50 英里的圆圈。圆形生成器与投影相结合将控制圆形的正确尺寸和正确外观。

<小时/>

D3 v3

如果您仍然坚持使用 D3 v3，该示例也适用。但是，您需要调整 names因此:

• d3.geo.circle ↦ d3.geoCircle

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

• 圆圈。 origin() ↦ 圆。 center()
• 圆圈。 angle() ↦ 圆。 radius()

将这些调整应用于我上面链接的 block ，这也适用于 v3:v3 Block .

<小时/>

当涉及到具有严重扭曲的异常投影时，这种方法可以发挥其优势。只需将 block 中的投影更改为 d3.geoGnomonic()这变得很容易看到。以下截图来自更新后Block仍然显示与上面相同的圆圈，每个圆圈的半径为 50 英里: