javascript - 如何在给定的地图投影中执行 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° 的圆弧：

小提琴