dc.js rowChart를 최대 키로 필터링

Question

시간이 지남에 인원수를 표시하는 대시 보드가 있습니다. 하나는 시간에 따른 인원수를 보여주는 선 그래프이고, 다른 하나는 HCLevel1로 분할 된 rowChart입니다. 즉, 사용자가 필터링 할 수 있도록하는 것입니다.

rowChart를 사용하면 날짜 필터 내에서 가장 최근의 기간에 대한 머리글을 표시 할 수 있습니다 (전체 기간의 머리글 전체를 잘못 표시 할 수 있음).

2 개의 필드를 결합하여이 작업을 수행 할 수 있지만이 문제는 rowChart를 사용하여 비즈니스별로 필터링 할 때 라인 차트에서 한 달만 볼 수 있습니다. 필터링 된 전체 기간 rowChart의 차원/키가 HCLevel1이기 때문에 어떻게 가짜 그룹을 사용하여이 작업을 수행 할 수 있습니까?

내 데이터는 다음과 같이 포맷 : 내가 (다른 SO 질문에서 픽업) 절감이 사용자 정의를 사용하려고했습니다

var data = = [ 
{ 
    "HCLevel1": "Commercial", 
    "HCLevel2": "Portfolio TH", 
    "Period": 201407, 
    "Heads": 720 
}, 

하지만이 제대로 작동하지 않습니다 (마이너스 값, 잘못된 값 등) .

function reduceAddAvgPeriods(p, v) { 
    if (v.Period in p.periodsArray) { 
     p.periodsArray[v.Period] += v.Heads; 
    } else { 
     p.periodsArray[v.Period] = 0; 
     p.periodCount++; 
    } 
    p.heads += v.Heads; 
    return p; 
} 

현재, 내 jsfiddle 예는 차원이 개 필드를 결합하지만, 당신이 볼 수 있듯이, 그때 나에게 선 차트에서 전체 기간을 표시하도록 rowChart를 사용하여 필터링 할 수 없습니다.

나는 평균을주기 위해 reductio를 사용할 수 있지만 필터링 된 가장 최근 날짜의 실제 Heads 값을 제공하고 싶습니다. 나는 이것이 가능 희망

https://jsfiddle.net/kevinelphick/4ybekqey/3/

은 어떤 도움이 많이 주시면 감사하겠습니다, 감사합니다!

Answer 1

나는 며칠 전 이걸 보았지만, 알아내는 데는 다소 시간이 걸렸습니다. 교활한!

우리는이 두 가지 사실을 고려하여 설계를 제한 할 수 있습니다

1. 우리는 "레벨"에 의해 행 차트를 필터링 할. 즉

   var dimLevel = cf.dimension(function (d) { return d.HCLevel1 || ''; }); 
   

2. A group does not observe its own dimension's filters.

   그래서 우리는 아마 행 차트의 데이터 (그룹)을 생산하기 위해 # 1에서 치수를 사용하려면 간단합니다.

레벨을 기준으로 차원을 지정하고 그룹화 할 수 있지만 그룹의 저장소 안에는 해당 저장소에 기여하는 기간을 기록해 두는 것이 좋습니다.

이 자주 stacked charts에 사용되는 일반적인 패턴입니다 : 여기

var levelPeriodGroup = dimLevel.group().reduce(
    function(p, v) { 
     p[v.Period] = (p[v.Period] || 0) + v.Heads; 
     return p; 
    }, 
    function(p, v) { 
     p[v.Period] -= v.Heads; 
     return p; 
    }, 
    function() { 
     return {}; 
    } 
); 

, 우리는 그냥 0을 떨어 뜨리는 상단 스택을 '벗겨'것 :

function last_period(group, maxPeriod) { 
    return { 
     all: function() { 
      var max = maxPeriod(); 
      return group.all().map(function(kv) { 
       return {key: kv.key, value: kv.value[max]}; 
      }).filter(function(kv) { 
       return kv.value > 0; 
      }); 
     } 
    }; 
} 

이 last_period을 어느 정도 유지하려면 일반적으로 maxPeriod은 다음과 같이 정의 할 함수입니다.

function max_period() { 
    return dimPeriod.top(1)[0].Period; 
} 

,210

모두 함께 반입 및 행 차트에 공급 : 기간이 차트의 레이블 더 이상 부분은 없습니다

rowChart 
    .group(last_period(levelPeriodGroup, max_period)) 
    .dimension(dimLevel) 
    .elasticX(true); 

때문에, 우리가 헤드 라인에 넣을 수 있습니다

<h4>Last Period: <span id="last-period"></span></h4> 

을 행형 차트가 그려 질 때마다 업데이트하십시오.

rowChart.on('pretransition', function(chart) { 
    d3.select('#last-period').text(max_period()); 
});