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