dc.js rowChartを最大キーでフィルタする

Question

時間の経過とともにヘッドカウントが表示されるダッシュボードがあります。 1つは、時間の経過とともに人数を示す線グラフで、もう1つはHCLevel1で分割されたrowChartです。これはユーザーがフィルタリングできるようにするためのものです。

私はrowChartに日付フィルタ内の最新期間のヘッダーを表示することをお勧めします（間違っていると思われる全期間の合計を表示するのではなく）。

2つのフィールドを1つのディメンションに結合することでこれを行うことができますが、問題は、rowChartを使用してビジネスでフィルタリングすると、折れ線グラフで1ヶ月しか表示されませんフィルタリングされた完全な期間。 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の例では、ディメンションに2つのフィールドを組み合わせているが、あなたが見ることができるように、私はその後、私の折れ線グラフ上の全期間を表示するためにrowChartを使用してフィルタリングすることができません。

私は平均を与えるためにreductioを使用できますが、フィルタされた最新の日付に対して実際のHeads値を提供したいと思います。私はこれが可能であると思います

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

は、任意の助けもいただければ幸いです、ありがとう！

Answer 1

私はこれを数日前に見ましたが、理解するのに少し時間がかかりました。トリッキー！

我々は、これら二つの事実を考慮して設計を制限することができます。

1. 私たちは、「レベル」によって行チャートをフィルタリングします。それは、だから我々は、おそらく行チャートのために（グループ）のデータを生成するために＃1からのディメンションを使用したいだけで

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

2. A group does not observe its own dimension's filters.です。これら2つの制約を考えると

、多分私達は次元とグループレベルではなく、グループのビンの内側に、そのビンに貢献する期間を追跡することができますか？

これは、多くの場合、stacked chartsのために使用される一般的なパターンです：ややlast_periodを保つために

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; 
      }); 
     } 
    }; 
} 

：

ここ

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 {}; 
    } 
); 

、私たちはただのゼロを落とし、トップスタック 'をはがし' よ一般的に、maxPeriodは関数として定義されます。

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

はそれをすべて一緒に持って来ると行チャートに供給する：

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()); 
});