将Lat / Long放在带有D3的azimuthalEqualArea映射上

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。所以经常是小事！