循環過渡並按給定順序顯示國家

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)