d3 자동 겹침 눈금 레이블

Question

겹쳐진 눈금 레이블을 그리지 않는 방법이 d3에 있습니까? 예를 들어 막 대형 차트가 있지만 막대의 너비가 5 픽셀이고 레이블의 너비가 10 픽셀이면 난잡한 엉망으로 끝납니다. 나는 현재 레이블이 겹치지 않을 때만 그리기위한 구현 작업을하고있다. 기존 방법을 찾을 수는 없지만 다른 사람이이 문제를 처리했는지는 확실하지 않았습니다.

Answer 1

D3에서 자동으로 수행 할 방법이 없습니다. 틱의 수 또는 틱 값을 명시 적으로 설정할 수 있지만 (the documentation 참조), 각각의 숫자/값을 알아 내야합니다. 또 다른 옵션은 라벨을 겹치지 않게 라벨을 회전시키는 것입니다.

또는 다른 답변에서 제안 된 것처럼 강제 배치를 사용하여 레이블을 배치 해 볼 수도 있습니다. 명확히하기 위해 라벨에만 강제 레이아웃을 사용합니다. 이는 차트 유형과 완전히 독립적입니다. 나는 다른 답변에 링크 된 것보다 약간 더 관련이있는 this example에서 이것을 수행했습니다.

강제 레이아웃 솔루션을 사용하는 경우 레이블 위치에 애니메이션을 적용 할 필요가 없습니다. 수렴 할 때까지 힘 레이아웃을 계산 한 다음 레이블을 그릴 수 있습니다.

Answer 2

this 스레드, 특히 this example에서 언급 된 것을 시도해 볼 수 있습니다. 레이블이 모두 들어갈 수 있도록 위/아래/아래로 밀어 넣을 수 있습니다. 이렇게하려면 별도의 힘을 사용해야합니다. 다른 레이블 자체

Answer 3

일부 상황 (화면 너비에 따라 다름)에서 마지막 틱이 세로 축과 겹치는 여러 (하위) 축과 비슷한 문제가 발생했습니다. 텍스트 레이블의 끝 위치와 다음 축의 위치. 이 코드는 내 사용 사례에 대한 매우 구체적인이지만, 여러분의 필요에 쉽게 적응 수 :

var $svg = $('#svg'); 

// get the last tick of each of my sub-axis 
$('.tick-axis').find('.tick:last-of-type').each(function() { 

    // get position of the end of this text field 
    var endOfTextField = $(this).offset().left + $(this).find('text').width(); 

    // get the next vertical axis 
    var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]'); 

    // there is no axis on the very right, so just use the svg width 
    var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width(); 

    // hide the ugly ones! 
    if (endOfTextField > positionOfAxis) { 
    $(this).attr('class', 'tick hide'); 
    } 

}); 

는 color: aqua에 숨겨진 것들을된다 틱 : 나는 힘 레이아웃을 사용하고 있지 않다