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