Question

（假设现有投影/ topojson）

我要做的是在半径（r）的英里点（[long，lat]）创建一个圆圈。我知道这有一个d3.geo功能，但经过一些考虑我不认为它将与我的特定应用程序非常兼容。

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

另外我应该指出，我的投影是动态的，取决于用户事件，投影（包括比例）可以改变。因此，我不确定这是否会影响在现有预测的范围内如何缩放圆圈，但我想我会披露这是安全的。

Answer 1

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

返回一个新的GeoJSON几何对象，类型为“Polygon”，近似于球体表面上的圆，其中包含当前center，radius和precision。任何参数都会传递给访问者。

剩下的唯一任务是以度为单位计算圆的半径。因为地球不是一个完美的球体，这可能会成为它自身的挑战。但对于许多应用来说，近似就足够了。考虑到 3,958 mi 的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()

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

当涉及到具有严重扭曲的异常预测时，这种方法发挥其优势。只需将块中的投影更改为d3.geoGnomonic()，即可轻松查看。来自更新Block的以下屏幕截图仍然显示与上面相同的圆圈，每个圆圈的半径为50英里：

具有半径的D3 Topojson圆圈以英里为单位缩放

1 个答案:

D3 v3