世界地図に国名を入力するにはどうすればよいですか？

"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ファイルの2行をテキストとしてコピー/貼り付けするだけです。 –

まず第一に：あなたは、内側の関数にデータに依存するすべてのコードを移動し、巣に（少し複雑ですかd3.queueを使用し、）これら2つの非同期のコードを持っています：

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

世界地図に国名を入力するにはどうすればよいですか？

答えて

関連する問題