D3マップをズームインするにはどうしたらいいですか？

Question

私はD3で作業していますが、これまでのところ、特定の状態を描くだけのクロロプラテスの例を微調整することができました。これには、他のポリゴンデータをすべて削除するだけで、必要な状態が残っています。

私はこれを開始しました：

、その後、これに物事を微調整：

しかし、私は何をしたいのですが、オートパンに/なるように作成時にマップをズームされますディスプレイの前面と中央には、次のように表示されます。

これはD3ライブラリで行いますか？または何らかの独立したコード（私は現在jquery-svgpanをd3で実行して手動パン/ズームを可能にしています）を実行します。

Answer 1

ズームインしている状態の境界ボックスに基づいて、状態を囲む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 + ")"); 
    }); 

多くは、より多くのあなたがそれをクリーンアップするために、ここで行うことができますがあります - あなたは、幅や高さにズームをベースに、ズームに応じて、ストローク幅を変更する必要があるかどうかをチェックし、最終ズームに余裕を与え、アニメーション移行など - しかし、それは基本的な概念です。