dc.js를 사용하여 서수 막대 차트에서 브러시 허용

Question

dc.js를 사용하여 x 축에 서수 값이있는 막 대형 차트를 만들고 브러시도 활성화하려고합니다.

브러시는 다른 그래프를 버블 차트 및 행 차트로 필터링하는 데 사용됩니다 ... 모든 그래프를 작성할 수 있지만 주요 문제는 브러시가 선택한 그래프에 따라 다른 그래프를 필터링 할 수는 없지만 다른 그래프는 브러시로 막 대형 차트를 필터링 할 수 있습니다.

나는이 문제에이를 데려에 대한 brush on ordinal barchart dc.js

Answer 1

감사를 바이올린의 코드를 사용하고 있습니다. 인용 된 티켓에서 내가 제공 한 솔루션은 불완전했으며 업데이트했습니다.

브러시를 표시하는 데 사용되는 filterFunction의 반환 값만 고려했습니다. 실제로 필터를 적용하지 않았으며 이는 filterFunction의 주된 목적입니다!

두 가지 변경이 필요합니다. 먼저 필터 배열이 비어 있는지 확인하고 필요한 경우 치수 필터를 지워야합니다. 둘째, 결과 필터가 있으면 치수에 적용해야합니다. 대신 keys[Math.ceil(rangefilt[1]) || 'zzzz']의 그것은 당신의 버블 차트에서 마지막으로 keys[Math.ceil(rangefilt[1])] || 'zzzz'

,해야한다 :

그래서 대신

chart.filterHandler(function(dimension, filters) { 
    return filters.map(function(rangefilt) { 
    var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzz'; 
    return dc.filters.RangedFilter(low,high); 
    }); 
}); 

우리는 또한

kpiMoveChart.filterHandler(function(dimension, filters) { 
    if(filters.length === 0) { 
     dimension.filter(null); 
     return filters; 
    } 
    // actually should only contain one filter but use .map as a convenience 
    var filters2 = filters.map(function(rangefilt) { 
     var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzzz'; 
     return dc.filters.RangedFilter(low,high); 
    }); 
    dimension.filterRange(filters2[0]); 
    return filters2; 
}); 

를 얻을, 당신은 하나의 작은 오타가 있었다 차트 영역을 변경하려면 보통 yAxisMin 및 친구를 재정의 할 필요가 없습니다. 항상 그래서,

이

kpiBubbleChart 
    .y(d3.scale.linear().domain([-10, 160])) 

(즉, 규모가 순서이기 때문에 어떤 영향을 미칠 것 같지 않았다 xAxisMin 및 xAxisMax 재정의 : 도메인을 수정하려는 경우 탄성 끄고 직접 도메인을 설정하는 것이 훨씬 더 우아 . 당신이 코드를 포함하지 않았기 때문에 아마도 가까운 투표는 https://jsfiddle.net/gordonwoodhull/g34Ldwaz/9/