d3.jsのズーム動作の補間方法を変更するには

d3.js V 4.0を使用して、SVGでズームとパンを提供しています。私はリセットボタンを実装して画像の中央に戻しています。動作していますが、デフォルトのd3.interpolateZoomを使用しているため、トランジション中に画像がズームアウトします。スケーリングで標準の補間をしたいだけですが、ズーム動作のためにインターポレータを変更する方法はわかりません。d3.jsのズーム動作の補間方法を変更するには

var map = document.querySelector('#map'); 
 
var everything = d3.select('#everything'); 
 
var zoomBehavior = d3.zoom(); 
 
zoomBehavior.scaleExtent([0.5, 10]) 
 
    .on('zoom', zoomed); 
 
d3.select(map).call(zoomBehavior); 
 

 
function zoomed() { 
 
    everything.attr('transform', d3.event.transform); 
 
} 
 

 
function reset() { 
 
    d3.select(this.map) 
 
    .transition() 
 
    .duration(1000) 
 
    .call(zoomBehavior.transform, d3.zoomIdentity); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script> 
 
<svg id="map" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <g id="everything"> 
 
    <circle r="5" cx="50" cy="15"></circle> 
 
    </g> 
 
</svg> 
 
<button onclick="reset()">reset</button>

残念ながら、これは私が見てい挙動を示すされていません。ここでは、コードの簡略版です。（私の実際のバージョンでは、スケールkはvan Wijk smooth zoomingを使って0を補間します）しかし、問題はまだ有効です。このズーム動作のためにインターポレータを変更する場合、どのように、どこでそれを行うのですか？ドキュメントが示唆していると思われるzoomBehavior.interpolate（d3.interpolate）を呼び出そうとしましたが、zoomBehavior.interpolateが関数ではないことを示すエラーが表示されます。

出典

2016-10-12 EricJ

避けようとしている動作を見ずにこれに答えるのは難しいです。上のサンプルコードは期待どおりに動作します。つまり、インターポレーターとそれに伴う遷移を完全に制御する例があります。ここで私は戻ってscale: 1に円をズームが、SVGの右下にxとyだ：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.js"></script> 
 
</head> 
 

 
<body> 
 
    <svg id="map" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <g id="everything"> 
 
     <circle r="5" cx="50" cy="15"></circle> 
 
    </g> 
 
    </svg> 
 
    <button onclick="reset()">reset</button> 
 
    <script> 
 
    var map = d3.select('#map'), 
 
     everything = d3.select('#everything'); 
 

 
    var zoomBehavior = d3.zoom(); 
 
    zoomBehavior.scaleExtent([0.5, 10]) 
 
     .on('zoom', zoomed); 
 

 
    map.call(zoomBehavior); 
 

 
    function zoomed() { 
 
     everything.attr('transform', d3.event.transform); 
 
    } 
 

 
    function reset() { 
 
     d3.select(this.map) 
 
     .transition() 
 
     .duration(1000) 
 
     .tween("custom", function() { 
 
      var curZoom = d3.zoomTransform(map.node()), 
 
      kInter = d3.interpolate(curZoom.k, 1), 
 
      xInter = d3.interpolate(curZoom.x, 240), 
 
      yInter = d3.interpolate(curZoom.y, 99); 
 
      return function(t) { 
 
      var ts = d3.zoomIdentity 
 
       .translate(xInter(t), yInter(t)) 
 
       .scale(kInter(t)); 
 
      map.call(zoomBehavior.transform, ts); 
 
      }; 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-10-12 13:15:39 Mark

私は私の中でそれをしようとすると、あなたの例では、コードスニペットで素晴らしい作品ながらトゥイーンで返された関数は一度しか呼び出されないので、変換doe snotが実際に発生します。どんなアイデアでも、これが何度も繰り返し実行されるのではなく、一回だけ起動する原因になるでしょうか？ – EricJ

@EricJ、あなたが与えた限られた情報では非常に難しいです。特定のコードで再現可能な例を作成できますか？ – Mark

スニペットやその他のシステムで問題を再現できないようです。そのシステムに何か問題があるはずです。 – EricJ

d3.jsのズーム動作の補間方法を変更するには

答えて

関連する問題