How can I do d3.svg.arc within a given map project

Question

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).

Answer 1

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