어떻게하면 세계지도에 국가 이름을 넣을 수 있습니까?

"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

어떻게하면 세계지도에 국가 이름을 넣을 수 있습니까?

답변

관련 문제