Question

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

我试图在鼠标悬停事件之前添加一个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; });
            };
            })
     })();
})

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

D3 - 将全球中心置于点击的国家/地区

1 个答案: