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

});

d3.js和geo投影albers / centers

1 个答案: