如何在给定的地图投影中执行d3.svg.arc？ [英] How can I do d3.svg.arc within a given map projection?

问题描述

在D3.js中找到在给定地图投影上绘制圆形扇区的信息时遇到麻烦。我一直在使用

小提琴

Having troubles finding information to draw a circular sector on a given map projection in D3.js. I have been using d3.svg.arc, but now I need to transform it to given d3.geo projections.

Note, this is not for drawing arcs between two points, but circular sectors (think pie wedges).

解决方案

You can create a function that calculates the coordinates along the desired arc in spherical coordinates (making use of the d3.geo.rotation function to save yourself the headache of figuring out the correct equations) and returns a LineString object:

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
    };
}

This can then be used to create the desired arc like this:

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

This generates an arc centered at 20°E, 40°N with a radius of 30°, running from -20° to 230°:

Fiddle

这篇关于如何在给定的地图投影中执行d3.svg.arc？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！