d3 zoom x-domain only

Question

현재 x 축에만 확대/축소를 제한하려는 d3 막대 그래프가 있습니다.

데이터가 x 축을 따라 높은 연도에 걸쳐 있으므로 막대 모양이 매우 높습니다. graph. x 축을 따라 확대 할 수있어서 바가 수평으로 멀리 퍼져 있습니다.이 라인 그래프에서 수행되는 것과 비슷합니다 here.

지금은 SVG 내의 각 요소를 선택하고 두 축을 따라 줌인하는 엠버 앱 내에 기능이 있습니다. 확대/축소를 X 축을 따라 만 수행하도록 어떻게 제한합니까? 그것이 가능했다 v3에서

enableZoom() {

const svg = d3.select('svg'); 

const zoomHandler = d3.zoom().scaleExtent([1, 2]).on('zoom', zoomed); 

const bars = svg.selectAll('.bar'), 
     lines = svg.selectAll('.line'), 
     circles = svg.selectAll('circle'); 

zoomHandler(svg); 

function zoomed() { 

    lines.attr('transform', d3.event.transform); 
    circles.attr('transform', d3.event.transform); 
    bars.attr('transform', d3.event.transform); 

} 

},

Answer 1

는해야 할 일 :

V4에서

const zoomHandler = d3.behavior.zoom() 
    .x(x) 
    .scaleExtent([1, 2]) 
    .on("zoom", zoomed); 

, 우리가 직접 우리의 리니어 스케일을 재조정하고를 사용해야합니다 축을 재조정하여 축을 만듭니다.

function zoomed() { 
    const transform = d3.event.transform; 

    // rescale the x linear scale so that we can draw the top axis 
    const xNewScale = transform.rescaleX(xScale); 
    xAxis.scale(xNewScale); 
    gAxis.call(xAxis); 

    // draw the lines, circles, bars in their new positions 
    lines.attr('cx', function(d) { return transform.applyX(xScale(d)); }); 
    circles.attr('cx', function(d) { return transform.applyX(xScale(d)); }); 
    bars.attr('cx', function(d) { return transform.applyX(xScale(d)); }); 
} 

체크 아웃 this article을 확인하십시오.