D3/SVG: 범위를 수정하여 시간 척도로 d3.svg.axis의 크기를 조정하는 방법은 무엇입니까? (D3/SVG: How to resize a d3.svg.axis with time scale by modifying range?)

문제 설명

D3/SVG: 범위를 수정하여 시간 척도로 d3.svg.axis의 크기를 조정하는 방법은 무엇입니까? (D3/SVG: How to resize a d3.svg.axis with time scale by modifying range?)

명백한 것을 놓치고 있는 것이 틀림없습니다. 좌절한 헤드뱅잉의 하루 후 SO로 전환 ;‑) :

d3.time.scale 및 d3.svg를 사용하여 시간 도메인 축을 생성했음을 감안할 때. axis, 나중에 범위를 변경하여 축의 크기를 수정하려면 어떻게 해야 하나요? (도메인을 유지하지만 결과적으로 축의 크기를 변경함)

나는 많은 다른 예를 읽고 따랐지만 시간 척도를 사용하지 않거나 도메인만 변경했습니다. 내가 얻은 가장 가까운 곳은 http://bl.ocks.org/d3noob/7030f35b72de721622b8이지만 해당 예제에서 패턴을 작동시킬 수 없는 것 같습니다.

나는 http://codepen.io/anon/pen/MaZJYM 코드가 약간 재미있습니다. ES6 클래스에 있는 내 코드에서 비트와 조각을 잘라내지만 문제가 정확히 표시됩니다. 버튼을 누르십시오. 링크된 예제와 같이 범위를 변경하고 축 호출을 다시 실행하면 아무 일도 일어나지 않습니다(이상한 텍스트 앵커 변경?? 제외).

참조 솔루션

방법 1:

Your update function should be like this:

function updateAxes() {
    timeScale.range( [30, 500 ] );//give a slight x

d3.select( '.axis.month' )
        .call( monthAxis )
        .selectAll( ".tick text" )
        .style( "text‑anchor", "start" )
        .attr( "x", 2 )
        .attr( "y", 3 );
    d3.select( '.axis.date' )//your code its .axis.day which is wrong
    .call( dayAxis ).selectAll( ".tick text" )
        .style( "text‑anchor", "middle" )
        .classed( "date", true )

}

Note: you will have to set the style to the axis in update else it will jump on the other ticks as in your fiddle.

Working example here

Hope this helps

(by Jesper We、Cyril Cherian)

참조 문서

1. D3/SVG: How to resize a d3.svg.axis with time scale by modifying range? (CC BY‑SA 2.5/3.0/4.0)