如何在我的地图上添加带有坐标的标记？

Question

我已经创建了一张地图，我必须在某些国家/地区放置一些标记。 我已经在我想要的国家上画了一些点，但我也需要一些标记。 我也尝试过this 的答案，但我在坐标方面遇到了问题，并且不知何故，标记只出现在 svg 的左上角。 我也看过其他一些帖子，但它们并没有真正起作用，所以请不要关闭问题并将其作为克隆。 这是我截取的代码：

var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
        
        // Map and projection
        var projection = d3.geoMercator()
            .scale(655)
            .translate([200, 850])
        
        // Create data: coordinates of start and end
        // var link = {type: "LineString", coordinates: [[21, 41], [11, 45]]} // Change these data to see ho the great circle reacts
        
        // A path generator
        var path = d3.geoPath()
            .projection(projection)
        
            var marks = [{long: 102, lat: 42}];
            var markers = [
            {long: 22, lat: 42}, // Kumanovo
            {long: 21, lat: 41.500}, // Skopje
            {long: 20.400, lat: 44.500}, // Belgrade
            {long: 20, lat: 41.500}, // Elbasan
            {long: 21, lat: 42.300}, // Prizren
            {long: 24.250, lat: 43}, // Sofia
            {long: 11.400, lat: 44.300}, //Forli
            {long: 20, lat: 41}, //Tirana
            {long: 12, lat: 53}, // Berlin
            {long: 43, lat: 57}, // Moscow
            {long: 0, lat: 41}, // Barcelona
            {long: 16, lat: 48.300}, // Barcelona
            ];

        // Load world shape
        d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
        
            // Draw the map
            svg.append("g")
                .selectAll("path")
                .data(data.features)
                .enter().append("path")
                    .attr("fill", "#b8b8b8")
                    .attr("d", d3.geoPath()
                        .projection(projection)
                    )
                    .style("stroke", "#fff")
                    .style("stroke-width", 1)
        
            svg.selectAll("myCircles")
            .data(markers)
            .enter()
            .append("circle")
            .attr("cx", function(d){ return projection([d.long, d.lat])[0] })
            .attr("cy", function(d){ return projection([d.long, d.lat])[1] })
            .attr("r", 3)
            .style("fill", "crimson")

            
        })
        

    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    
    <svg id="my_dataviz" width="750" height="500"></svg>

Answer 1

您尝试复制的示例在模板文字中缺少正确的)。但是，即使解决了这个问题，由于图像没有在坐标处“居中”，您的标记也会稍微偏离。

修复它看起来像这样：

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

// Map and projection
var projection = d3.geoMercator()
  .scale(655)
  .translate([200, 850])

// Create data: coordinates of start and end
// var link = {type: "LineString", coordinates: [[21, 41], [11, 45]]} // Change these data to see ho the great circle reacts

// A path generator
var path = d3.geoPath()
  .projection(projection)

var marks = [{
  long: 102,
  lat: 42
}];
var markers = [{
    long: 22,
    lat: 42
  }, // Kumanovo
  {
    long: 21,
    lat: 41.500
  }, // Skopje
  {
    long: 20.400,
    lat: 44.500
  }, // Belgrade
  {
    long: 20,
    lat: 41.500
  }, // Elbasan
  {
    long: 21,
    lat: 42.300
  }, // Prizren
  {
    long: 24.250,
    lat: 43
  }, // Sofia
  {
    long: 11.400,
    lat: 44.300
  }, //Forli
  {
    long: 20,
    lat: 41
  }, //Tirana
  {
    long: 12,
    lat: 53
  }, // Berlin
  {
    long: 43,
    lat: 57
  }, // Moscow
  {
    long: 0,
    lat: 41
  }, // Barcelona
  {
    long: 16,
    lat: 48.300
  }, // Barcelona
];

// Load world shape
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data) {

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("fill", "#b8b8b8")
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    .style("stroke", "#fff")
    .style("stroke-width", 1)

  svg.selectAll(".m")
    .data(markers)
    .enter()
    .append("image")
    .attr('width', 20)
    .attr('height', 20)
    .attr("xlink:href", 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png')
    .attr("transform", (d) => {
      let p = projection([d.long,d.lat]);
        return `translate(${p[0]-10}, ${p[1]-10})`;
     });
})

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<svg id="my_dataviz" width="750" height="500"></svg>