Javascript D3-将地球中心对准单击的国家

在下面的示例中，我看到当用户选择一个国家时，地球仪会旋转并以该国家为中心。我如何对其进行编码，以便在单击某个国家时，地球会以该国家为中心

我曾尝试在mouseover事件之前添加一个on-click处理程序，但它似乎不起作用。有什么想法吗

.on("click", function(d) {
    var rotate = projection.rotate(),
    focusedCountry = country(countries, this),
    p = d3.geo.centroid(focusedCountry);
    svg.selectAll(".focused").classed("focused", focused = false);

    //Globe rotating

    (function transition() {
     d3.transition()
     .duration(2500)
     .tween("rotate", function() {
            var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
            return function(t) {
            projection.rotate(r(t));
            svg.selectAll("path").attr("d", path)
            .classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; });
            };
            })
     })();
})

---

首先创建一个单击路径，如下所示：

 .on("click", function(d){rotateMe(d);})

更改单击数据的代码。获取单击路径的id并获取其国家/地区数据

var rotateMe =  function(d) {
  var rotate = projection.rotate(),
  focusedCountry = country(countries, d.id),//get the clicked country's details
  p = d3.geo.centroid(focusedCountry);
  console.log(focusedCountry, "hello")
  svg.selectAll(".focused").classed("focused", focused = false);

//Globe rotating

(function transition() {
  d3.transition()
  .duration(2500)
  .tween("rotate", function() {
    var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
    return function(t) {
      projection.rotate(r(t));
      svg.selectAll("path").attr("d", path)
      .classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; });
    };
  })
  })();
};

---

工作代码

你知道什么有趣吗？如果超过国际日期线，地球仪将向后旋转！例如：旋转地球仪两到三次，将给定的国家放置在靠近中心的位置。如果你点击那个国家，你会认为地球会旋转一点，使这个国家居中，对吗？但是，相反，它将旋转两到三次，然后使整个国家居中！不！无法重现：）尝试了很多次，但没有发现任何异常……真的吗？也许只是我的浏览器？试试这个：你的预测是从中部的西非开始的。将投影向西移动（使地球以正常方式自西向东旋转），直到澳大利亚位于投影的正中心。现在点击澳大利亚。在我的浏览器中，地球完全转向东方，然后以澳大利亚为中心。不，在FF版本28操作系统上尝试过：linux ubuntu和chrome（版本：47.0.2526.80）无法重新创建..完全按照您的指示执行..奇怪.非常，确实！我使用的是Windows764，这在Chrome49和FF45中都会发生！