D3.jsでポリゴンをズームする方法

Question

以下の例に示すように同じズーム動作を行う方法を理解しようとしていますが、ジオパスの代わりに通常のポリゴンを使用しています。

https://bl.ocks.org/mbostock/4699541

私はアドレスこののSOような​​もので、ここでいくつかの答えを見てきましたが、アニメーションが途切れ途切れであるか、妙に周りにジャンプします。

私が持っているHTMLは、私は、マップの長方形と同じグループにいくつかのポリゴンを追加し、ポリゴンの境界線上に拡大表示できるようにしたいと思い

<div id="map-container"> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    id="canvas" 
    viewBox="0 0 4328 2880"> 
    <defs> 
     <pattern id="mapPattern" 
       patternUnits="userSpaceOnUse" 
       x="0" 
       y="0" 
       width="4328" 
       height="2880"> 
      <image xlink:href="/development/data/masterplan.png" 
        x="0" 
        y="0" 
        width="4328" 
        height="2880"></image> 
     </pattern> 
    </defs> 
    <g id="masterGroup"> 
     <rect fill="url(#mapPattern)" 
       x="0" 
       y="0" 
       width="4328" 
       height="2880" /> 
    </g> 
</svg> 

です。誰も私にそのような行動のバイブルを見せてもらえますか？

また、スクロールホイールやパンを使用したくないと付け加えるべきです。クリックしたポリゴンをズームインし、別のクリックでズームアウトするだけです。

Answer 1

多分、これはあなたを助けるでしょう。私はここに質問に答え、以前の今日：私はトランジションを追加したhttp://jsfiddle.net/thatOneGuy/JnNwu/921/

：ここD3js outer limits

は、私は一緒に入れフィドルあるsvg.transition().duration(1000).attr('transform',function(d){

お知らせあなたは面積が応えるために移動ノードの1つをクリックした場合新しいレイアウトのサイズ

基本は質問へのリンクで説明されていますが、基本的に私はバウンディングボックスを得て、それに応じてSVGを翻訳しました。そこで私は新しい四角形のサイズに翻訳して拡大縮小しました。

かなりわかりやすいです。ここで遷移の主要部分である：あなたのコードでそう

svg.transition().duration(1000).attr('transform',function(d){ 

var testScale = Math.max(rectAttr[0].width,rectAttr[0].height) 
var widthScale = width/testScale 
var heightScale = height/testScale 
var scale = Math.max(widthScale,heightScale); 

var transX = -(parseInt(d3.select('#invisRect').attr("x")) + parseInt(d3.select('#invisRect').attr("width"))/2) *scale + width/2; 
var transY = -(parseInt(d3.select('#invisRect').attr("y")) + parseInt(d3.select('#invisRect').attr("height"))/2) *scale + height/2; 

return 'translate(' + transX + ','+ transY + ')scale('+scale+')' ; 
}) 

、スニペットに見られるように、あなたのrectAttr値は、上記のあなたのポリゴンのgetBoundingClientRect（）から取得された値であろう：x, y, width and height。

ここではd3.select('#invisRect')を使用していますが、これもboundingBoxRect（）である必要があります。残りはちょうどうまくいくはずです。ここで

EDIT

私はフィドルで作られた編集が提供されていますhttp://jsfiddle.net/thatOneGuy/nzt39dym/3/

を私はポリゴンのバウンディングボックスを取得し、それに応じた矩形の値を設定するには、この機能を使用：

var bbox = d3.select(polygon).node().getBBox(); 

var rectAttr = { 
    x: bbox.x, 
    y: bbox.y, 
    width: bbox.width, 
    height: bbox.height, 
    };