Question

我成功使用＆＃34; world-110m.json＆＃34;创建地图。但我不知道如何将国名放在世界地图上。

这是我的代码;

<!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值来做这件事，但我不知道该怎么做。

Answer 1

首先：您必须嵌套这两个异步代码（或使用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。因为这超出了你的问题的范围，并且我反对在同一篇文章中提出多个问题（顺便说一下，这是关闭问题的理由），我将离开{ {1}}和x任务给你。

如何在世界地图上输入国家/地区名称？

1 个答案: