D3 줌 translateExtent 적용되지 않았습니다.

Question

나는 반응 형 barchart를 만들기 위해 D3 v4를 사용하고 있습니다. Brush & Zoom

translateExtent를 구현하여 x 방향으로 만 변환하려고하지만 잘못된 작업을 파악할 수 없습니다. g 요소를 드래그하려고하면 특정 위치로 이동합니다.

설정에 대한 나의 코드 :

margin = {top: margins.top, right: margins.right, bottom: margins.bottom, left: margins.left}; 
    width = size.width - margins.left - margins.right; 
    height = size.height - margins.top - margins.bottom; 

var svg = d3.select("#" + container).append("svg") 
    .attr("class", "svgWrapper_" + container); 

var cont = svg.append("g") 
    .attr('class', 'mainContainer_' + container) 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + .margin.bottom); 

    svg.call(d3.zoom() 
     .translateExtent([[0, 0],[width, height]]) 
     .on("zoom", function() { 
      cont.attr("transform", d3.event.transform) 
     })) 
     .on("dblclick.zoom", null) 
     .on("wheel.zoom", null); 

Answer 1

은 내가 공식 해설 그것을하지 않았다 ... 그것을 테스트를 해결 : d3js

그러나 여기 그것을 시도 적응 jsfiddle의 I입니다 translateExtent 테스트하는 데 사용 : 첫 번째 jsfiddle의 translateExtent이 작동하지 않은 이유 jsfiddle

var zoom = d3.zoom() 
.translateExtent([[-300, 0], [600 , height ]]) 
.on("zoom", zoomed); 

svg.call(zoom); 

function zoomed() { 
    circle.attr("transform", d3.event.transform); 
} 

는 아직도 모른다, 그러나 이미 I 내 차트에 그것을 구현하고 그것을 작동합니다.