DC.js barchart bars가 브러시에서 사라지고 날짜 범위 문제의 총량이

Question

몇 가지 간단한 DC, D3 및 Crossfilter 데이터 시각화 차트에서 작업하고 있습니다. 많은 예제를 들여다 본 후에 브러시를 움직일 때 바 스타일의 바가 사라지는 이유를 알 수 없습니다.

내가 고민하고있는 또 다른 한 가지는 두 번째 차트를 만들고 첫 번째 차트에서 선택한 날짜 범위에 연결하려고하는 것입니다. 첫 번째 문제는 분명히 작동하도록 수정해야하지만 내 코드에도 다른 문제가 있다는 것을 알고 있습니다. 이 두 번째 차트를 첫 번째 그래프의 선택한 날짜에 대한 "h"필드의 합계를 표시하는 단일 막대가있는 막대 차트로 만들려고합니다. 브러시를 이동하기 전에도 총계에 대해 3 개만 표시되므로 h 치수를 입력하면 날짜 차원에서 생성 한 그룹만으로는 충분하지 않습니다.

JSFiddle : 어떤 도움을 크게 감상 할 수 https://jsfiddle.net/schins02/bLkgLuhg/

rData.forEach(function(d, i) { 
    d.date = d3.time.format("%Y-%m-%d").parse(d.date); 
    }); 

var playerData = crossfilter(rData); 

//dimensions and groups 
var dateDim = playerData.dimension(function(d) { 
    return d.date; 
}); 

var abDim = playerData.dimension(function(d) { 
    return d.ab 
}); 

var hitDim = playerData.dimension(function(d) { 
    return d.h 
}); 

var absGroupByDate = dateDim.group().reduceSum(function(d) { 
    return d.ab 
}); 

var hitsGroupByDate = dateDim.group().reduceSum(function(d) { 
    return d.h 
}); 

var x_domain = d3.extent(rData, function(d) { 
    return d.date; 
}); 

var x_scale = d3.time.scale(); 
x_scale.domain(x_domain); 

var abChart = dc.barChart("#ab-bar-chart"); 

abChart 
    .width(WIDTH) 
    .height(HEIGHT + 30) 
    .x(x_scale) 
    .y(d3.scale.linear().domain([0, d3.max(rData, function(d) { 
    return d.ab 
    })])) 
    .yAxisLabel("") 
    .centerBar(true) 
    .dimension(abDim) 
    .alwaysUseRounding(true) 
    .xUnits(function() { 
    return 15; 
    }) 
    .group(absGroupByDate); 

abChart.elasticX(true); 
abChart.xAxisPadding(1); 
abChart.xAxis().tickFormat(d3.time.format("%b %d")).ticks(d3.time.days, 3); 
abChart.yAxis().tickFormat(d3.format("d")); 
abChart.render(); 

abChart.on("filtered", function(chart) { 
    //??? 
    //console.log(chart); 
    //console.log(dateDim); 
    //dc.redrawAll(chart.chartGroup()); 
    //hitDim.filterRange(newDate(?) , new Date(?)); 
}); 

var hitChart = dc.barChart("#hit-bar-chart"); 

var totalHits = playerData.groupAll().reduceSum(function(d) { 
    return d.h; 
}).value(); 

hitChart 
    .width(200) 
    .height(HEIGHT + 30) 
    .x(d3.scale.ordinal().domain(["Hits"])) 
    .xUnits(dc.units.ordinal) 
    .y(d3.scale.linear().domain([0, totalHits])) 
    .yAxisLabel("") 
    .centerBar(true) 
    .dimension(hitDim) 
    .brushOn(false) 
    .alwaysUseRounding(true) 
    .group(hitsGroupByDate) 

    hitChart.render(); 

.

Answer 1

실제로 크로스 필터의 세계 모델은 익숙해 져 있습니다. "차원"이라는 이름은 다소 오해의 소지가 있습니다. 실제로 "필터링 할 대상"이며, 해당 차원에서 구축 된 그룹은 필터를 관찰하지 않고 다른 차원 만 관찰합니다.

은 그래서 당신이 그것을 필터링 할 때 자신의 데이터가 제거되지 않도록

1. 당신은 일반적으로 하나의 차트가 일치 할 그룹과 차원을 것을 의미합니다. 첫 번째 차트에는 날짜가 표시되므로 dateDim을 사용하십시오. 이렇게하면 날짜 범위가 필터에 의해 적용될 때 (그룹의 키를 기반으로 함) 유형이 일치합니다. 그리고 그 자체도 걸러 내지 않을 것입니다.

2. 모든 데이터의 합계를 표시하는 단일 막대를 얻으려면 in this recent answer 트릭을 사용하여 crossfilter groupAll이 일반 그룹처럼 동작하도록 할 수 있습니다. 여기서 필터링 할 것이 없기 때문에 차원이 무엇인지는 중요하지 않습니다.

두 번째 부분은 다음과 같이 표시됩니다

function regularize_groupAll(groupAll) { 
    return { 
     all: function() { 
      return [{key: 'all', value: groupAll.value()}]; 
     } 
    }; 
} 
var allHits = playerData.groupAll().reduceSum(function(d) { 
    return d.h; 
}); 
var totalHits = allHits.value(); 
var regAllHits = regularize_groupAll(allHits); 

포크 당신의 바이올린의 : https://jsfiddle.net/gordonwoodhull/sfLnoxdr/7/