在 D3 geoNaturalEarth1 地图上绘制点

Question

我必须使用给定的坐标在世界地图上绘制点。由于某些原因，这些点的位置被证明是错误的（例如，第一个点应该在加拿大，但显示在非洲）。

我使用的 Topojson：https://github.com/d3-node/d3node-map-world/blob/master/data/world.json

代码：

    const projection = d3.geoNaturalEarth1()
        .center([0, 49.5])
        .scale(180);

    const path = d3.geoPath()
        .projection(projection);
    const svg = d3n.createSVG(width, height);


    svg.append('g')
        .selectAll('path')
        .attr('class', 'countries')
        .data(data.features)
        .enter().append('path')
        .attr('d', path)
        .style('stroke', 'white')
        .style('stroke-width', 1.5)
        .style('opacity', 0.8);


    svg.append('path')
        .datum(topojson.mesh(data.features, (a : any, b : any) => { return a.id !== b.id; }))
        .attr('class', 'countries')
        .attr('d', path);


    let points = [{long: 50.085767, lat: -101.681522}, { long: 24.568085, lat: 22.260878}];

    svg.append('g')
        .selectAll('circle')
        .data(points)
        .enter().append('circle')
        .attr('r', 7.5)
        .attr('fill', 'red')
        .attr("transform", (d) => `translate(${projection([d.long, d.lat])})`);

Fiddle:

https://jsfiddle.net/vypu9qwr/16/

Answer 1

交换纬度和经度，-101的纬度不存在

let marks = [{long: -101.681522, lat: 50.085767}, { long: 24.568085, lat: 22.260878}];

在 D3 geoNaturalEarth1 地图上绘制点

Plotting points on a D3 geoNaturalEarth1 Map

javascript

d3.js

world-map