D3 - 以点击的国家为中心

Question

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

D3 Globe

我曾尝试在鼠标悬停事件之前添加一个单击处理程序，但它似乎不起作用。有什么想法吗？

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

Answer 1

首先创建一个点击路径如下：

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

工作代码here