如何使用d3重复旋转

我想弄清楚如何重复一个过渡。我用我自己的tsv文件使用world tour。 tsv文件小得多，很快就结束了世界巡回演唱会。我该如何重复旋转，以便从头开始？如何使用d3重复旋转

 //Globe rotating 
     (function transition() { 
     d3.transition() 
     .duration(1500) 
     .each("start", function() { 
      title.text(countries[i = (i + 1) % n].name); 
     }) 
     .style("color", "lightgreen") 
     .style("text-anchor", "middle") 

     .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); //clear the canvas for redrawing 
      c.fillStyle = "black", c.beginPath(), path(land), c.fill(); 
      c.fillStyle = "lightgreen", c.beginPath(), path(countries[i]), c.fill(); 
      c.strokeStyle = "green", 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); 
    })(); 
}

来源

2014-09-10 Pheeb

这应该已经循环到最后。表达式'i =（i + 1）％n'设置'i'到达'n'时回到零。如果它不工作，你需要检查原因。在通过序列结束后，“i”是什么？什么是'n'？这是否等于参观国的数量？它应该是。 – meetamit 2014-09-10 20:59:42

一种选择是当它超过在列表的国家数量重置i为零。事情是这样的：

.each("start", function() { 
    i = (i + 1) % n; 

    if(i >= names.length) 
    i = 0; 

    title.text(countries[i].name); 
    })

编辑：看世界巡回赛示例代码后，一个简单的解决办法是重新定义n是你的数据（而不是国家的地图上的号码）的长度：

 n = names.length; // instead of countries.length

然后你可以保留其余的代码。该表达式中的模 - i = (i + 1) % n - 将在您到达列表末尾时重置为零。

来源

2014-09-10 21:05:36 Peter

如何使用d3重复旋转

回答

相关问题