d3.jsバージョン4 - rectズーム - 変換が正しくできない

Question

d3.js verison 4： 私は線グラフを持っていますが、これには矩形ズームが必要です。 私はこの例を使用：http://bl.ocks.org/jasondavies/3689931

例代わりに

に私は、通常のズーム要素にこれを適用するように私は、スケールに矩形データを適用する必要はありません。そのために

私は数学を持っている：

.on("mouseup.zoomRect", function() { 
     d3.select(window).on("mousemove.zoomRect", null).on("mouseup.zoomRect", null); 
     d3.select("body").classed("noselect", false); 
     var m = d3.mouse(e); 
     m[0] = Math.max(0, Math.min(width, m[0])); 
     m[1] = Math.max(0, Math.min(height, m[1])); 
     if (m[0] !== origin[0] && m[1] !== origin[1]) { 

      //different code here 

      //I have the scale factor 
      var zoomRectWidth = Math.abs(m[0] - origin[0]); 
      scaleFactor = width/zoomRectWidth; 

      //Getting the translation 
      var translateX = Math.min(m[0], origin[0]); 

      //Apply to __zoom Element 
      var t = d3.zoomTransform(e.node()); 
      e.transition() 
          .duration(that.chart.animationDuration) 
          .call(that.chart.zoomX.transform, t 
           .translate(translateX, 0) 
           .scale(scaleFactor) 
           .translate(-translateX, 0) 
          ); 
     } 
     rect.remove(); 
     refresh(); 
     }, true); 

だから私は実際にはスケールファクタの権利を取得し、それがスムーズにズームイン。 問題は、翻訳が正しく行われていないようです。 これで間違った位置にズームインします。

Answer 1

だから今すぐ正しくなった： 以前のズームによるすべての変換は元に戻す必要があります。 k = 1、x = 0、y = 0となるように、k = 1、x = 0、y = 0とする。 これはd3.zoomIdentityです。 その時点から現在のズームを適用し、その後に翻訳を適用する必要があります。

ニーズを変換古いが適用されることをした後、最初に翻訳した後、ここでしかX軸の

var t = d3.zoomTransform(e.node()); 

//store x translation 
var x = t.x; 

//store scaling factor 
var k = t.k; 

//apply first rect zoom scale and then translation 
//then old translate and old zoom scale 
e.transition() 
    .call(that.chart.zoomX.transform, d3.zoomIdentity 
    .scale(scaleFactor) 
    .translate(-translateX, 0) 
    .translate(x) 
    .scale(k) 
); 

ワーキングフィドルをスケーリング：ここでXとY軸のhttps://jsfiddle.net/9j4kqq1v/3/

の作業フィドル： https://jsfiddle.net/9j4kqq1v/5/