2

以下は私が書いたコードの一部であり、誰かが私を助けて、私が想像していたように応答しない理由を説明してくれることを願っています.

私は（明らかに）オンラインの多くの例、ドキュメントなどからこれをつなぎ合わせ、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>
4

1 に答える 1

0

project.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);

});
于 2012-12-31T02:24:17.583 に答える