如何获取我的D3地图以放大地点？

我正在和D3一起工作，到目前为止，我已经能够调整chloropleth示例，只绘制一个特定的状态。这涉及到简单地删除所有其他多边形数据，以便我留下所需的状态。如何获取我的D3地图以放大地点？

我开始用这样的： enter image description here

然后扭捏的事情是：在创建 enter image description here

不过，我想要做的就是自动平移/缩放地图，以使状态是显示器的正面和中心，如下所示： enter image description here

是否可以通过D3库执行此操作？或一些独立的代码（我目前有jquery-svgpan与d3运行，以允许手动平移/缩放），以实现这一目标？

2012-09-17 Dillie-O

接近最简单的方法，我发现，是设置g元素封闭状态（#states中的例子），根据你放大到国家的边框上的转换：

// your starting size 
var baseWidth = 600; 

d3.selectAll('#states path') 
    .on('click', function(d) { 
     // getBBox() is a native SVG element method 
     var bbox = this.getBBox(), 
      centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2], 
      zoomScaleFactor = baseWidth/bbox.width, 
      zoomX = -centroid[0], 
      zoomY = -centroid[1]; 

     // set a transform on the parent group element 
     d3.select('#states') 
      .attr("transform", "scale(" + scaleFactor + ")" + 
       "translate(" + zoomX + "," + zoomY + ")"); 
    });

有很多你可以做更多在这里把它清理干净 - 给予一定的保证金到最后变焦，检查是否应立足变焦的宽度和高度，改变取决于变焦笔画宽度，动画过渡等 - 但这是基本概念。

来源

2012-09-19 16:49:49 nrabinowitz

非常好！我前几天在D3网站上发现了一些转换代码，这对我的国家观点有所帮助，但我会将其用于我个人的状态视图并通知您。 –

d3完成加载地图后，我会如何调用我的缩放/变换？我会知道我需要获取边界框的具体路径（我正在使用Ids），我想立即获得更大的视图，而不是依赖于单击事件。由于我只渲染单个路径，我可以使用.enter方法而不是.on吗？我仍然习惯于D3 –

你可以，但通常这会是你在更新时要做的事情，因为任何时候你想要改变状态或缩小都需要重做。 – nrabinowitz

如何获取我的D3地图以放大地点？

回答

相关问题