d3.js 버전 4 - rect zoom - 변환을 올바르게 할 수 없습니다.

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입니다. 그 시점부터 현재 확대/축소를 적용한 다음 변환해야합니다.

요구를 변환 이전을 적용 할 그 후, 최초의 번역 만 여기에 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/