dc.js seriesChart가 rangeChart와 함께 작동하지 않는 것 같습니다.

Question

seriesChart를 사용하여 브러시로 rangeChart 필터를 가져 오려고했습니다. 기본 차트가 필터에 응답하지 않는 것 같습니다. 나는 series-with-range-example

var chart = dc.seriesChart("#test"); 
var overviewChart = dc.seriesChart("#test-overview"); 
var ndx, runDimension, runGroup, overviewRunDimension, overviewRunGroup; 

var experiments = d3.csv.parse(d3.select("pre#data").text()); 

    ndx = crossfilter(experiments); 
    runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; }); 
    overviewRunDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; }); 
    runGroup = runDimension.group().reduceSum(function(d) { return +d.Speed; }); 
    overviewRunGroup = overviewRunDimension.group().reduceSum(function(d) { return +d.Speed; }); 

    chart 
    .width(768) 
    .height(480) 
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); }) 
    .x(d3.scale.linear().domain([0,20])) 
    .brushOn(false) 
    .yAxisLabel("Measured Speed km/s") 
    .xAxisLabel("Run") 
    .clipPadding(10) 
    .elasticY(true) 
    .dimension(runDimension) 
    .group(runGroup) 
    .mouseZoomable(true) 
    .rangeChart(overviewChart) 
    .seriesAccessor(function(d) {return "Expt: " + d.key[0];}) 
    .keyAccessor(function(d) {return +d.key[1];}) 
    .valueAccessor(function(d) {return +d.value - 500;}) 
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70)); 
    chart.yAxis().tickFormat(function(d) {return d3.format(',d')(d+299500);}); 
    chart.margins().left += 40; 

    overviewChart 
    .width(768) 
    .height(100) 
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); }) 
    .x(d3.scale.linear().domain([0,20])) 
    .brushOn(true) 
    .xAxisLabel("Run") 
    .clipPadding(10) 
    .dimension(overviewRunDimension) 
    .group(overviewRunGroup) 
    .seriesAccessor(function(d) {return "Expt: " + d.key[0];}) 
    .keyAccessor(function(d) {return +d.key[1];}) 
    .valueAccessor(function(d) {return +d.value - 500;}) 

    dc.renderAll(); 

그것은 내가 데 문제를 보여, jsFiddle에 rangeChart을 series.html 예를 데리고했다. 어떤 제안?

Answer 1

글쎄, 나는 일종의 추악한 코드를 사용하고있다. 여기서 일반적인 문제는 dc.js 차트에는 인스턴스간에 브러시를 공유 할 방법이 없으므로 일반적으로 복합 브러싱 (하나의 인스턴스가 많은 경우)이 제대로 작동하지 않는다는 것입니다.

특히, here is the issue for series charts. 그리고 관심이있는 누구에게나 even-more specific issue of focus-series charts is here.

뭔가 효과적이기를 원한다면, 여기에 나온 아주 끔찍한 해결 방법이 있습니다.

먼저 해결 방법이 아닌 한 가지. 포커스 및 범위 차트에 항상 동일한 차원 및 그룹을 사용하려고합니다. 이는 서로 필터링하기를 원하지 않기 때문입니다. 즉, 동일한 데이터에 대한 뷰이며 논리적으로 브러시를 공유합니다.

그래서 내가 그랬어 : 어떤 점에서

overviewChart 
    .dimension(runDimension) 
    .group(runGroup) 

누군가가 복합 차트를 필터링,하지만 아이들에게 아래 필터를 통과하지 않음으로써 복합 필터링 문제를 해결하기 위해 시도했다. 따라서 자식 중 하나에서 필터 이벤트를 캡처하고 범위 차트가 필터링 될 때 일반적으로 수행하는 작업을 수행하면 원하는 동작을 얻게됩니다. 여기

는 정말 추한 얻을 수있는 곳입니다 :

overviewChart 
    .chart(function(c,_,_,i) { 
    var chart = dc.lineChart(c).interpolate('basis'); 
    if(i===0) 
    chart.on('filtered', function (chart) { 
     if (!chart.filter()) { 
      dc.events.trigger(function() { 
       overviewChart.focusChart().x().domain(overviewChart.focusChart().xOriginalDomain()); 
       overviewChart.focusChart().redraw(); 
      }); 
     } else if (!rangesEqual(chart.filter(), overviewChart.focusChart().filter())) { 
      dc.events.trigger(function() { 
       overviewChart.focusChart().focus(chart.filter()); 
      }); 
     } 
    }); 
    return chart; 
    }) 

on('filtered', ...) 물건 rangechart의 좌표 그리드 차트 구현에서 꽤 많은 도매 복사됩니다.

"Working" fork of your fiddle. there is an issue where points on the boundary of a chart do not get rendered은 불합리한 전환으로 이어지기 때문에 "근무 중"이라고 표시합니다.

하지만 일종의 작품입니다.