如何獲取我的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地圖以放大地點？

回答

相關問題