How can I put a country name on the world map?

Question

I succeeded in creating a map using "world-110m.json". But I don't know how to put the country name on the world map.

Here is my code;

<!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>

The common thing about both files is that they have the same id value. I guess I should do this using the id value, but I do not know what to do.

Answer 1

First of all: you'll have to nest those two asynchronous codes (or use d3.queue , which is a bit more complicated), moving all the code that depends on the data to the inner function:

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

Now, let's combine those data.

There are different alternatives. My suggestion here is that you use a map (not to be confused with a geographic map, or with the array's method), and it's probably the fastest way.

First, declare the map:

var countryNames = d3.map();

Then, in the d3.tsv 's row function, we populate the map :

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

Then, you create a selection for the texts, retrieving the name according to the id . Here I'm creating a new property, named countryName , but that's not necessary.

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

Of course, you will have to set the x and y positions of those texts. The obvious choice is using path.centroid . As this is outside of the scope of your question, and as I'm against asking multiple questions in the same post (which, by the way, is a reason to close the question), I'll leave the x and y position task to you.

How can I put a country name on the world map?

Question

1 answers

solution1
2 ACCPTED 2017-10-07 07:21:56

How can I put a country name on the world map?

Question

1 answers

solution1 2 ACCPTED 2017-10-07 07:21:56

solution1
2 ACCPTED 2017-10-07 07:21:56