如何在國際地圖上放置國名？

我成功地使用「world-110m.json」創建了一張地圖。但我不知道如何把國名放在世界地圖上。如何在國際地圖上放置國名？

這是我的代碼;

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src = "https://d3js.org/d3.v3.min.js"></script> 
    <script src = "http://d3js.org/topojson.v1.min.js"></script> 
    </head> 
    <body> 
    <script> 
     var margin = {top: 0, right: 0, bottom: 0, left: 0}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

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

     var projection = d3.geo.mercator() 
        .scale(130) 
        .translate([width/2, height/1.5]); 

     var path = d3.geo.path().projection(projection); 
     //Data loading 
     d3.json("world-110m.json", function(error, world) { 

     d3.tsv("world-110m-names.tsv", function(error, names) { 
      //I don't know what I can do?? 
     }) 

     svg.selectAll("path") 
      .data(topojson.feature(world, world.objects.countries).features) 
      .enter() 
      .append("path") 
      .attr("d", path) 
     }); 
    </script> 
    </body> 
</html>

這兩個文件的共同點是它們具有相同的id值。我想我應該使用id值來做這件事，但我不知道該怎麼做。

來源

2017-10-07 Mr.Bong

請不要在您的問題上放置*圖片*的代碼。只需複製/粘貼tsv文件的幾行文本即可。 –

首先：你必須巢這兩個異步代碼（或使用d3.queue，這是一個比較複雜），移動所有依賴於數據到內部功能的代碼：

d3.json("world-110m.json", function(error, world) { 
    d3.tsv("world-110m-names.tsv", function(error, names) { 
     //everything here 
    }) 
})

現在，讓我們結合這些數據。

有不同的選擇。我的建議是，你使用一個map（不要與地理地圖或數組的方法混淆），這可能是最快的方法。

首先，聲明地圖：

var countryNames = d3.map();

然後，在d3.tsv的連續函數，我們填充map：

d3.tsv("world-110m-names.tsv", function(d) { countryNames.set(d.id, d.name); }, function(error, names) { 
    //etc...

然後，您創建的文本選擇，檢索該名稱根據id。我在這裏創建一個名爲countryName的新屬性，但這不是必需的。

svg.selectAll(null) 
    .data(topojson.feature(world, world.objects.countries).features) 
    .enter() 
    .append("text") 
    .text(function(d){ 
     return d.countryName = countryNames.get(d.id); 
    })

當然，你必須設置這些案文的x和y位置。明顯的選擇是使用path.centroid。由於這不屬於您問題的範圍，因爲我反對在同一帖子中提出多個問題（順便說一句，這是解決問題的理由），我將離開x和y定位任務給你。

來源

2017-10-07 07:21:56

如何在國際地圖上放置國名？

回答

相關問題