javascript - 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])})`);

フィドル:

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