使用 D3 在方位角等面积地图上放置纬度/经度

Question

我正在尝试在地图上绘制一些纬度/经度点，但我无法让它们出现在正确的位置。

这些点应该在旧金山。我有一个JSfiddle of the code。

var width = 400,
    height = 400;

var projection = d3.geo.azimuthalEqualArea()
    .clipAngle(180 - 1e-3)
    .scale(100)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
    svg.insert("path", ".graticule")
        .datum(topojson.feature(world, world.objects.land))
        .attr("class", "land")
        .attr("d", path);

    svg.insert("path", ".graticule")
        .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
        .attr("class", "boundary")
        .attr("d", path);

});

var latlong = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838312,-122.0423922]},"properties":{"timestampMs":1415894666875}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838474,-122.0423972]},"properties":{"timestampMs":1415894601718}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838474,-122.0423972]},"properties":{"timestampMs":1415894536288}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838411,-122.0424015]},"properties":{"timestampMs":1415894471356}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.383878,-122.0423925]},"properties":{"timestampMs":1415894406257}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838317,-122.0423856]},"properties":{"timestampMs":1415894326769}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838287,-122.0423933]},"properties":{"timestampMs":1415894261810}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.383829,-122.0423847]},"properties":{"timestampMs":1415894196224}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838765,-122.0424141]},"properties":{"timestampMs":1415894131768}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.3838177,-122.0423668]},"properties":{"timestampMs":1415894066809}}]};

// THESE ARE THE POINTS THAT ARE NOT BEING PLACED CORRECTLY
svg.selectAll("circle")
    .data(latlong.features).enter()
    .append("circle")
    .attr("cx", function (d) { return projection(d.geometry.coordinates)[1]; })
    .attr("cy", function (d) { return projection(d.geometry.coordinates)[0]; })
    .attr("r", "2px")
    .attr("fill", "red");

Answer 1

您为 d3.geo 指定了错误的纬度和经度，并且您还错误地获取了输出。这与按约定（N/S 然后 E/W）显示它们的方式相反，但它更符合先横后上/下的绘图约定。

来自 D3 API 地理参考中的 path.projection：

投影函数采用二元素数组 表示一个位置的坐标，[经度，纬度]，和 返回一个类似的二元数字数组，表示 投影像素位置 [x, y]。

为了解决这个问题，我反转了您的 FeatureCollection 的坐标：

var latlong = {"type":"FeatureCollection","features":[
    {"type":"Feature","geometry":{"type":"Point","coordinates":[-122.0423922,37.3838312]},"properties":{"timestampMs":1415894666875}},
etc...

并反转你的情节坐标。

    .attr("cx", function (d) { return projection(d.geometry.coordinates)[0]; })
    .attr("cy", function (d) { return projection(d.geometry.coordinates)[1]; })

其他一切都很好。在这里修改JSFiddle。很多时候都是小事！