d3.js Version 4 - rect Zoom - kann nicht die Transformation richtig bekommen

Question

d3.js verison 4: Ich habe ein Liniendiagramm, das ein Rechteck Zoom haben sollte. benutzen ich dieses Beispiel: http://bl.ocks.org/jasondavies/3689931

Ich will nicht die Rechteck-Daten auf die Waage gelten, wie im Beispiel

Statt dies zu meinem normalen Zoom-Elemente Ich mag anzuwenden.

Dafür habe ich die Mathematik:

.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); 

So richtig ich eigentlich den Skalierungsfaktor und es zoomt sanft in. Das einzige Problem ist, dass ich die Übersetzung nicht korrekt finde. So zoomt es in die falsche Position.

Answer 1

So, jetzt habe ich es richtig gemacht: Alle Transformationen von früheren Zooms müssen rückgängig gemacht werden.

, so dass k = 1, x = 0, y = 0; Dies ist die d3.zoomIdentity. Von diesem Punkt an muss der aktuelle Zoom angewendet werden und anschließend die Übersetzung.

Danach wird die alte Bedürfnisse Transformation angewendet werden, zuerst übersetzen und dann maßstabs

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) 
); 

Arbeits Fiddle nur für X-Achse hier: https://jsfiddle.net/9j4kqq1v/3/

Arbeits Geige für X und Y-Achse hier: https://jsfiddle.net/9j4kqq1v/5/