如何在我的地圖上添加帶有坐標的標記？

我已經創建了一張地圖，并且必須在某些國家/地區放置一些標記。我已經在我想要的國家/地區加了一些點，但我也需要一些標記。我也試過這個答案，但我在坐標方面遇到了麻煩，不知何故，標記只出現在 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>

uj5u.com熱心網友回復：

您嘗試復制的示例)在模板文字中缺少一個權限。但是，即使修復了該問題，由于影像未在坐標處“居中”，您的標記也會略微偏離。

修復它看起來像這樣：

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>

標籤：d3.js 数据可视化

上一篇：在圖例刻度中顯示正確域值的問題

下一篇：D3工具提示不跟隨滑鼠