d3.js версия 4 - прямой зум - не может получить преобразование вправо

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

Так что я на самом деле получить право scaleFactor и масштабирование гладко. Проблема только в том, что я не верю, что перевод правильный. Таким образом, он приближается к неправильному положению.

Answer 1

Итак, теперь я получил это правильно: Все преобразования с помощью более ранних масштабирования необходимо отменить.

так, что k = 1, x = 0, y = 0; Это d3.zoomIdentity. С этого момента необходимо применить текущий масштаб, а затем - перевод.

После этого старого преобразования должны быть применено, первый перевод, а затем масштабировать

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 здесь: https://jsfiddle.net/9j4kqq1v/3/

Работы скрипки для X и Y осей здесь: https://jsfiddle.net/9j4kqq1v/5/