D3.js 循环过渡并按给定顺序显示国家

我正在使用迈克·博斯托克的世界巡演地图，我想做一些修改

1） 我想在最后一个国家的展览后重播动画

2） 不按名称DESC排序，我想按tsv文件上的行号定义顺序

我曾尝试在转换中添加重播功能，但运气不佳，我似乎无法真正理解它是如何工作的，因此我需要一些帮助

function ready(error, world, names) {
  if (error) throw error;

  var globe = {type: "Sphere"},
      land = topojson.feature(world, world.objects.land),
      countries = topojson.feature(world, world.objects.countries).features,
      borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }),
      i = -1,
      n = countries.length;

  countries = countries.filter(function(d) {
    return names.some(function(n) {
      //if (d.id == n.id) return d.name = n.name;
      if (d.id == n.id) {
          d.name = n.name;
          d.org = n.org;
          return d;
      }
    });
  }).sort(function(a, b) {
    return a.name.localeCompare(b.name);
  });

  (function transition() {
    d3.transition()
        .duration(1250)
        .each("start", function() {
          var data_pais = countries[i = (i + 1) % n]
          title.text(data_pais.name);
          subtitle.text(data_pais.org);
        })
        .tween("rotate", function() {
          var p = d3.geo.centroid(countries[i]),
              r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
          return function(t) {
            projection.rotate(r(t));
            c.clearRect(0, 0, width, height);
            c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill();
            c.fillStyle = "#f00", c.beginPath(), path(countries[i]), c.fill();
            c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
            c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke();
          };
        })
      .transition()
        .each("end", transition);
  })();
}

---

bl.ock中的原始代码实际上是重复的（不过我还没有看到）。显示的国家/地区位于以下部分：

title.text(countries[i = (i + 1) % n].name);

这允许列表重复。然而，n是由地理特征的数量而不是TSV中条目的数量定义的。如果你想访问每一个国家，这是很好的，但如果你想访问一些国家，就不那么好了。因此，您可以将n重新定义为：

 n = names.length;

至于排序，如果您只想删除字母排序，您应该能够删除

 .sort(function(a, b) {
return a.name.localeCompare(b.name)

但是，现在默认的显示顺序将是世界json中功能的顺序。为了改变这一点，我尝试将“order”列应用于TSV，并将该值应用于排序：

countries = countries.filter(function(d) {
return names.some(function(n) {
   if (d.id == n.id) { return  [d.order = n.order, d.name = n.name] }
   })
}).sort(function(a, b) {
   return +a.order - +b.order; 
});

这使用了一个名为“order”的TSV列，尽管可能会有更优雅的方法使用行编号

同样重要的是要注意，TSV中的初始条目（标有负数的条目）在地图上不作为特征存在，因此明智的做法是不要在任何自定义TSV中使用它们

我认为问题中引用的bl.ock可能会停在萨摩亚上，从最后的第三个，因为我在测试这个解决方案时遇到了一些困难，删除它修复了这个问题。它可能不是json世界中的一个特性。因此，可能还有其他一些原因导致打嗝

---

示例：

bl.ock中的原始代码实际上是重复的（但我还没有看到这一点）。显示的国家/地区位于以下部分：

title.text(countries[i = (i + 1) % n].name);

这允许列表重复。然而，n是由地理特征的数量而不是TSV中条目的数量定义的。如果你想访问每一个国家，这是很好的，但如果你想访问一些国家，就不那么好了。因此，您可以将n重新定义为：

 n = names.length;

至于排序，如果您只想删除字母排序，您应该能够删除

 .sort(function(a, b) {
return a.name.localeCompare(b.name)

但是，现在默认的显示顺序将是世界json中功能的顺序。为了改变这一点，我尝试将“order”列应用于TSV，并将该值应用于排序：

countries = countries.filter(function(d) {
return names.some(function(n) {
   if (d.id == n.id) { return  [d.order = n.order, d.name = n.name] }
   })
}).sort(function(a, b) {
   return +a.order - +b.order; 
});

这使用了一个名为“order”的TSV列，尽管可能会有更优雅的方法使用行编号

同样重要的是要注意，TSV中的初始条目（标有负数的条目）在地图上不作为特征存在，因此明智的做法是不要在任何自定义TSV中使用它们

我认为问题中引用的bl.ock可能会停在萨摩亚上，从最后的第三个，因为我在测试这个解决方案时遇到了一些困难，删除它修复了这个问题。它可能不是json世界中的一个特性。因此，可能还有其他一些原因导致打嗝

---

示例：

嘿，安德鲁，你的名字说得对。长度位，谢谢！。自定义排序不起作用，为了以防万一，我删除了排序代码并将tsv传递到csv文件，但它以字母顺序显示国家。啊，是的，我想我应该在测试时交换顺序。我想我设法解决了这个问题；在一些有限的测试中，我管理了一个定制订单。我已经用一些额外的代码更新了答案。嘿，安德鲁，关于名字你是对的。长度位，谢谢！。自定义排序不起作用，为了以防万一，我删除了排序代码并将tsv传递到csv文件，但它以字母顺序显示国家。啊，是的，我想我应该在测试时交换顺序。我想我设法解决了这个问题；在一些有限的测试中，我管理了一个定制订单。我已经用一些额外的代码更新了答案。