如何解決縮放中的重複標籤

我在放大地圖時遇到問題，因爲標籤看起來是重複的。我知道我的問題出現，因爲在我的縮放我不刪除標籤。我知道問題在哪裏，我需要刪除最老的標籤，當我做一個縮放，但我不知道如何以及在哪裏解決這個問題。如何解決縮放中的重複標籤

有什麼想法？ Ty爲所有。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    margin: 0; 
} 

path { 
    fill: none; 
    stroke: green; 
    stroke-linejoin: round; 
    stroke-width: 1.5px; 
} 

</style> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> 
<script src="d3.geo.tile.min.js"></script> 
<script> 

var width = Math.max(960, window.innerWidth), 
    height = Math.max(600, window.innerHeight); 

var tile = d3.geo.tile() 
    .size([width, height]); 

var projection = d3.geo.mercator() 
    .scale((3 << 12)/2/Math.PI) 
    .translate([width/2, height/2]); 

var center = projection([-3, 36]); 

var path = d3.geo.path() 
    .projection(projection); 

var zoom = d3.behavior.zoom() 
    .scale(projection.scale() * 2 * Math.PI) 
    .translate([width - center[0], height - center[1]]) 
    .on("zoom", zoomed); 

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

var raster = svg.append("g"); 

var g = svg.append("g"); 

var vector = svg.append("path"); 

d3.json("es.json", function(error, es) { 
    if (error) throw error; 
    svg.call(zoom); 
    vector.datum(topojson.mesh(es, es.objects.provinces)); 

    zoomed(); 
}); 



function zoomed() { 


d3.csv("data/country-capitals.csv", function(err, capitals) { 
    capitals.forEach(function(i){ 
     addpoint(i.CapitalLongitude, i.CapitalLatitude, i.CapitalName); 
    }); 
    }); 

    var tiles = tile 
     .scale(zoom.scale()) 
     .translate(zoom.translate()) 
    (); 

    projection 
     .scale(zoom.scale()/2/Math.PI) 
     .translate(zoom.translate()); 

    vector 
     .attr("d", path); 

    var image = raster 
     .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")") 
    .selectAll("image") 
     .data(tiles, function(d) { return d; }); 

    image.exit() 
     .remove(); 



    image.enter().append("image") 
     .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) 
     .attr("width", 1) 
     .attr("height", 1) 
     .attr("x", function(d) { return d[0]; }) 
     .attr("y", function(d) { return d[1]; }); 
} 

    function addpoint(lat,lon,text) { 

    var gpoint = g.append("g").attr("class", "gpoint"); 
    var x = projection([lat,lon])[0]; 
    var y = projection([lat,lon])[1]; 

    gpoint.append("svg:circle") 
     .attr("cx", x) 
     .attr("cy", y) 
     .attr("class","point") 
     .attr("r", 1.5); 

    //conditional in case a point has no associated text 
    if(text.length>0){ 

    gpoint.append("text") 
      .attr("x", x+2) 
      .attr("y", y+2) 
      .attr("class","text") 
      .text(text); 
    } 

} 


    </script>

CSV是在這裏：

CountryName,CapitalName,CapitalLatitude,CapitalLongitude,CountryCode,ContinentName 
Brazil,Brasilia,-15.783333333333333,-47.916667,BR,South America 
Colombia,Bogota,4.6,-74.083333,CO,South America 
Egypt,Cairo,30.05,31.250000,EG,Africa 
France,Paris,48.86666666666667,2.333333,FR,Europe 
Iraq,Baghdad,33.333333333333336,44.400000,IQ,Asia 
South Korea,Seoul,37.55,126.983333,KR,Asia 
Kosovo,Pristina,42.666666666666664,21.166667,KO,Europe 
Mexico,Mexico City,19.433333333333334,-99.133333,MX,Central America

來源

2016-01-14 Deckard27

u能提供data/country-capitals.csv和es.json – Cyril

很難提供json文件結構，但你可以使用公共us.json – Deckard27

國名，CapitalName，CapitalLatitude，CapitalLongitude，CountryCode，ContinentName 巴西，巴西利亞，-15.783333333333333，-47.916667，BR，南美洲哥倫比亞，波哥大4.6，-74.083333，CO ，南美埃及，開羅，30.05,31.250000，EG，非洲法國，巴黎，48.86666666666667,2.333333，FR，歐洲伊拉克，巴格達，33.333333333333336,44.400000，智商，亞洲韓國，首爾，37.55,126.983333，KR亞洲科索沃普裏什蒂納42.666666666666664,21.166667 KO歐洲墨西哥墨西哥城19.433333333333334 -99.133333 MX中美洲 – Deckard27

你放大之前，你可以刪除包含文本和圈像這樣所有組：

function zoomed() { 

    d3.selectAll(".gpoint").remove(); 

    d3.csv("my.csv", function(err, capitals) { 
    capitals.forEach(function(i){ 
     addpoint(i.CapitalLongitude, i.CapitalLatitude, i.CapitalName); 
    }); 
    }); 
//your code

工作代碼here

來源

2016-01-14 11:30:41 Cyril

感謝所有我想要做的gpoint.remove（）;但是用這個我刪除了所有的標籤。再次感謝所有。 – Deckard27

如何解決縮放中的重複標籤

回答

相關問題