D3 - Dünyayı tıklatılan ülkeye ortalayın

Question

Aşağıdaki örnekte, bir ülke bir ülke seçtiğinde, dünyanın döndüğü ve o ülkeye yöneldiğini görüyorum. Bir ülkeye tıklandığında, dünyanın o ülkeye gitmesi için nasıl kodlayabilirim?

D3 Globe

Ben mouseover olaydan önce tıklama işleyicisi bir ekleme yapmaya çalıştık ama işe görünmüyor. Herhangi bir fikir?

.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

İlk böyle yoluna bir tıklama oluşturun: tıklanan veriler için

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

Değişim kodunu. Tıklanan yolun kimliğini alın ve ülke verilerini alın.

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

kod here