dc.js는 두 개의 다른 데이터 세트로 차트를 표시하고 하나의 차트는 다른 차트로 업데이트합니다.

Question

dc.js를 사용하여 서로 다른 두 개의 데이터 세트로 두 개의 다른 차트를 연결하려고합니다.

첫 번째 도넛 형 차트는 선형 차트의 필터 역할을해야하지만 둘 사이의 연결 방법을 찾지 못했습니다.

나는이 데이터 세트에 참여하지 않는 편이 좋고 합류가 너무 의미가 없으므로 선호합니다.

내가 선택한 항목을 잡아 당신은 잘 생각이있어 http://jsfiddle.net/yccu/qBr7y/32/

Answer 1

라인 차트

sobRingChart.on('filtered', function(chart) { 
    PUchart.filter(null) 
    .filter(chart.filters()); 
    dc.redrawAll() 
}); 

예에서 그들을 필터링을 시도, 그냥 데이터 불일치입니다.

이해해야 할 중요한 사항은 크로스 필터의 모든 필터링이 차원 개체를 통해 발생한다는 것입니다. 필터링하는 값은 필터링하는 차원과 호환되어야합니다.

따라서 꺾은 선형 차트는 시간 기반이므로 Source으로 필터링 할 수 없습니다.

var sourceDim2 = spendData2.dimension(function(d) { return d.Source; }) 

그럼 대신 라인 차트의 차원을 필터링 : 당신은 그렇게 다른 차원을 설정해야합니다 그것이 여러 값 필터링 처리 할 수 ​​있기 때문에

sobRingChart.on('filtered', function(chart) { 
    if(chart.filters().length) 
    sourceDim2.filterFunction(function(k) { 
     return chart.filters().indexOf(k) !== -1; 
    }); 
    else sourceDim2.filter(null); 
    dc.redrawAll() 
}); 

이는 복잡하다 (링 차트의 슬라이스가 두 개 이상 선택되었을 때). Crossfilter는 그렇게 단순하지는 않습니다. 아마 모든 것이 그렇게 효율적인 것은 아니기 때문입니다. (대개 중요하지 않습니다.)

그래서 필터가 있는지 알아봐야합니다. 존재하는 경우, 우리는 현재 고려 된 키가 chart.filters()에 있는지보기위한 필터 함수를 설정합니다. 그렇지 않은 경우 .filter(null)으로 전화하여 필터를 지 웁니다.