0

선형 눈금 x 축을 사용하여 d3 그림을 만들었습니다. tickFormat()을 사용하여 xaxis에 텍스트 레이블을 배치했습니다.선형 눈금의 틱에 대한 텍스트 레이블을 사용하면 확대/축소가 축을 넘어 연장됩니다.

플롯을 확대/축소하면 틱 값이 x 축을 넘어 확장됩니다. xaxis (svg rect) 너머의 틱 (텍스트 레이블 사용)이 사라지게하려면 어떻게해야합니까?

var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom") 
    .tickValues(idForXAxis) 
    .tickFormat(function(d,i){ return valuesForXAxis[i] }) 

바이올린 : https://jsfiddle.net/wicedp/q1b2dsdt/4/

답변

0

여기서 문제가 tickFormat 없습니다. 범인을 쉽게 찾을 수 있습니다 : tickValues을 제거하면 진드기가 범위 내에 머물러 있습니다.

가장 좋은 아이디어는 단순히 D3이 틱을 생성하도록하는 것입니다. 그러나 valuesForXAxis 배열의 모든 값을 원래보기로 표시하고 눈금을 포맷하는 확대/축소 비헤이비어가 계속 나타나게하려면 해결 방법이 있습니다. valuesForXAxis 배열 안에 값의 수와 진드기 수를 설정 : 다음

xAxis.ticks(idForXAxis.length) 

과를, 당신의 zoomed 함수 내에서 : https://jsfiddle.net/pfrdvLtx/

+0

감사합니다. 나는 당신의 제안을 사용했고, 이제 값들은 범위 내에 머물러 있습니다. 하지만 항상 배열의 값 - 인덱스 0에서 "idForXAxis.length/d3.event.scale"까지의 "valuesForXAxis"를 표시합니다. 선 플롯을 추가하고 확대/축소하면 플롯과 x 축의 동기가 맞지 않습니다. –

+0

여기에 그 변화가있는 바이올린이 있습니다. https://jsfiddle.net/wicedp/c6m2wkms/ 아마 "valuesForXAxis"배열의 시작 색인과 끝 색인에 대한 오프셋이 필요합니다. –

0

내가 할 수 있었다 :

여기
xAxis.ticks(idForXAxis.length/d3.event.scale); 

업데이트 된 바이올린입니다 이 코드를 추가하여 문제를 해결하십시오. -

var clipX = svg.append("clipPath") 
    .attr('id', 'clip-x-axis') 
    .append('rect') 
    .attr('x', -10) 
    .attr('y', 0) 
    .attr('width', width) 
    .attr('height', margin.bottom); 

svg.append("g") 
.attr("class", "x axis") 
.attr('clip-path', 'url(#clip-x-axis)') 
.attr("transform", "translate(0, " + height + ")") 
.call(xAxis) 
.selectAll(".tick text") 
    .call(wrap, 0); 

이 방법을 사용하면 xaxis가 올바르게 변환되고 잘 리게됩니다. 여기는 바이올린입니다 - https://jsfiddle.net/wicedp/q1b2dsdt/12/