줌/드래그에서 d3.js 눈금 선 배율/다시 그리기

Question

어제 d3.js를 사용하기 시작했는데, 내 작업을 완료하는 데 어려움이 있습니다.

지금까지 필자는 두 개의 y 축을 가진 차트를 만들었습니다. 각 차트에는 몇 가지 값이 표시되고 x 축에는 날짜가 표시됩니다.

y 축의 값을 클릭하면 해당 수평 그리드 선이 표시됩니다.

내 문제는 축 값을 사용하여 확대 또는 축소하거나 드래그 할 때 눈금 선 (가로 및 세로)이 올바르게 조정되지 않는다는 것입니다. 전혀 움직이지 않습니다.

오늘 오후에 많은 내용을 검색하고이를 수행하는 방법을 찾았지만 이미 가지고있는 코드와 아무런 관련이없는 것으로 나타났습니다.

나는 논리 줌 동작에 추가되어야하지만 난

// x axis gridlines 
function make_x_gridlines() { 
    return d3.axisBottom(x) 
     .ticks(5) 
} 


// add the X gridlines 
let xGrid = svg.append("g") 
    .attr('class', 'grid')  
    .attr("id", "grid") 
    .attr("transform", "translate(0," + height + ")") 
    .call(make_x_gridlines() 
     .tickSize(-height) 
     .tickFormat("") 
) 

//zoom behavior 
function zoomed() { 
    .. some behavior .. 

    //redraw gridlines here? 

    .. some behavior .. 
} 

모든 일에 대한 this fiddle를 참조하시기 바랍니다 모르겠어요 것을 가정한다.

z 축이 아니더라도 두 번째 y 축 (오른쪽) zAxis를 호출했습니다.

도움말은 정말로 감사하겠습니다.

Answer 1

확대/축소시 축이 작동합니다. 그 이유는 함수 zoomed()에서 저울을 업데이트하기 때문입니다.

그래서 눈금을 확대하려면 눈금을 업데이트하면됩니다. 이 코드를 함수 zoomed()에 넣으면 제대로 작동합니다.

xGrid.call(
    d3.axisBottom(x) 
     .scale(d3.event.transform.rescaleX(x)) 
     .ticks(5) 
     .tickSize(-height) 
     .tickFormat("") 
    ) 

이제이 축척 업데이트를 다른 모든 그리드에 복제하면됩니다. 죄송하지만 완전한 답을 드릴 수는 없지만 지금은 시간이별로 없습니다.

---

자, 내 의견으로는, 정말 간단하기 때문에 함수 make_gridlines()가 없어야합니다, 당신은 다른 장소에 대한 업데이트의 많은 작업을 할 때 그것은 나를 혼란.

make_gridlines()을 호출하는 대신 d3.axisBottom(x).ticks(5)으로 전화하십시오.

(내가 D3와 JS 새로운 해요합니다, 그래서이 내 작은 경험과 지식을 바탕으로 추천 해요) 마법처럼