dc.js barChart - x 축 틱 및 레이블을 클릭하십시오.

Question

몇 가지 막 대형 차트에 dc.js (2.0.0-beta.32)를 사용하고 있는데, 값이 2-3 배 차이가 나는 막대가 표시 될 수 있습니다 더 작은 값의 막대를 거의 제로 높이로 만들지 만 안정적으로 클릭하는 것은 거의 불가능합니다.

막대의 높이에 대해 비선형 척도를 사용하여이 문제를 다소 완화 할 수 있습니다.하지만 이는 프로젝트 전체의 데이터와 차트에 대한 다른 제약 때문에 유용하지는 않습니다.

.label()을 통해 라벨을 추가하는 것은 레이아웃 때문에 내가 할 수 없기 때문에 가능합니다.

내가 뭔가를 분명 잃었하지 않는 한, 내가 X 축 틱을 할 수있는 방법을 볼 수는 (.label() 통해 추가 막대 위에보다는 라벨) 자체가 클릭 할 수있는 레이블 :의 선택을 할 수있는 방법이있다 열 (bar + 관련 눈금 레이블에서와 같이)?

내가 찾은 가장 가까운 해결책은 이것이다 : https://stackoverflow.com/a/30560518/550077 40 ~ 50 개 좁은 막대를 포함 내 차트 레이아웃을 다시 정말 사용할 수 없습니다 (비록 그것이 작은 개선의지만을 클릭 수로 클릭이 여전히 신뢰할 수 없습니다 틱 라벨에)

Answer 1

x 도메인을 데이터에 매핑하는 방법을 알고 있다면 축에 자신의 클릭 핸들러를 추가 할 수 있습니다.

예를 들어, the filtering example에, 당신은 다음과 같이 핸들러를 추가 할 수 있습니다

spendHistChart.select('.axis.x') 
    .selectAll('.tick text') 
    .on('click', function(d) { 
     spendHistChart.replaceFilter(new dc.filters.RangedFilter(d, d+1)); 
     spendHistChart.redrawGroup(); 
    }); 

바와 같이 on the user group을 언급, 그들에 의해 dc.css으로 사용할 수있어 이후 당신은 또한, 진드기에 대한 pointer-events를 사용하도록 설정해야합니다 태만.

위의 그림은 선형 눈금이있는 차트를 가정 한 것입니다. 서수 규모를 다루는 경우 전화는 .replaceFilter(d)과 같이 간단 할 수 있지만 x 도메인에서 실제 데이터로의 매핑에 따라 다릅니다.