d3.js和地理預測albers /中心

Question

下面是我寫的一些代碼，我希望有人能幫助我，並解釋爲什麼它沒有按照我的想象來回應。

我有（很明顯）從一些例子，文檔等在線聯繫在一起，我正在使用d3.v3.js.我想更好地理解投影的中心，比例和翻譯屬性，因此，除了大量的閱讀，我還想寫一個簡短的腳本，允許用戶點擊地圖上的一個新「中心」 - 實際上，您應該可以點擊此地圖（使用圖庫中的一些數據製作），然後在新的州/地點等位置重新獲取地圖。

問題是，每次我爲數據設置一個新的中心作爲點擊的反投影點（即，反轉點以獲取新座標以設置中心）時，地圖以阿拉斯加爲中心，那麼我可以幾次點擊這個普通區域，並且世界「旋轉」回到視圖中。

我在做什麼錯？我認爲這個劇本可以幫助我更好地理解發生了什麼，並且我到了那裏，但是如果可能的話，我希望得到你的一點幫助。

<script> 
var w = 1280; 
var h = 800; 

var proj = d3.geo.albers();                  

var path = d3.geo.path() 
      .projection(proj); 

var svg = d3.select("body")                  
      .insert("svg:svg")                 
       .attr("height", h)                
       .attr("width", w);                

var states = svg.append("svg:g")                
        .attr("id", "states");              
d3.json("./us-states.json", function(d) {              
    states.selectAll("path")                  
     .data(d.features).enter()                 
     .append("svg:path")                 
      .attr("d", path)                 
      .attr("class", "state");               
}); 

svg.on("click", function() { 
    var p = d3.mouse(this);                  
    console.log(p+" "+proj.invert(p));               
    proj.center(proj.invert(p)); 
    svg.selectAll("path").attr("d", path);              

}); 

</script> 

Answer 1

您應該能夠使用projection.rotate（）

svg.on("click", function() { 
    p = proj.invert(d3.mouse(this)); 
    console.log(p);               
    proj.rotate([-(p[0]), -(p[1])]); 
    svg.selectAll("path").attr("d", path); 

});