javascript - 如何在给定的 map 投影中执行 d3.svg.arc？

Question

在 D3.js 中查找信息以在给定 map 投影上绘制圆形扇区时遇到问题。我一直在用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