在下面的示例中,我看到当用户选择一个国家/地区时,地球会旋转并居中到该国家/地区。如何对其进行编码,以便在点击某个国家/地区时,该地球会集中到该国家/地区?
我试图在鼠标悬停事件之前添加一个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; });
};
})
})();
})
答案 0 :(得分:3)
首先点击这样的路径:
.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