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

您应该能够使用 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);

});
于 2012-12-31T02:24:17.583 回答