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

Question

我正在使用Mike Bostock世界旅游地图visualization，我想进行一些修改。

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); 
    })(); 
} 

Answer 1

bl.ock中的原始代码实际上重复了自己（我没有真正看到过这个）。显示的国家位于以下部分：

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

它允许重复列表。然而，n由地理特征的数量而不是TSV中的条目的数量来定义。如果你想拜访每个国家，这是非常好的，但如果你想拜访一些国家，那就太好了。所以，你可以重新定义电量为：

n = names.length; 

至于排序，你应该能够砍掉，如果你只是想删除的字母排序。

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

但是，现在默认的显示顺序将是世界json中功能的顺序。要改变这种状况，我想申请一个“命令”列到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; 
}); 

这将使用名为“订单”的TSV列，虽然有可能会是用更优雅的方式行号。

还需注意，TSV中的初始条目（即负数标记的条目）并不作为地图上的要素存在，所以不要在任何自定义TSV中使用它们。

我认为在问题中引用的bl.ock可能会在萨摩亚停止，从结尾第三位开始，因为我在测试此解决方案时遇到了一些困难，因此解决了该问题。它可能不是世界json中的一个功能。所以可能有其他一些会引起打嗝。

例子：Custom World Tour (bl.ocks.org)