如何在给定的地图投影中执行d3.svg.arc？

Question

在D3.js中找到在给定地图投影上绘制圆形扇区的信息时遇到困难。我一直在使用d3.svg.arc，但现在我需要将其转换为给定的d3.geo投影。

请注意，这不是用于在两点之间绘制圆弧，而是用于绘制圆形扇区(想想饼形楔形)。

Answer 1

您可以创建一个函数来计算球面坐标中沿所需圆弧的坐标(使用d3.geo.rotation函数来省去计算正确方程式的麻烦)，并返回一个LineString对象：

function geoArc(center, radius, startAngle, endAngle, steps) {
    coordinates = []
    for (var i = 0; i <= steps; i++) {
        var curAngle = (startAngle + (endAngle - startAngle) * i / steps);
        coordinates[i] = d3.geo.rotation(center)(d3.geo.rotation([0, 0, curAngle])([radius, 0]))
    }
    return {
        type: "LineString",
        coordinates: coordinates
    };
}

然后可以使用它来创建所需的圆弧，如下所示：

svg.append("path")
    .datum(geoArc([20, 40], 30, -20, 230, 40))
    .classed("circle", true)
    .attr("d", path);

这将生成以20°E，40°N为中心的圆弧，半径为30°，范围为-20°到230°：

​

​

Fiddle