dc.js数値表示フィルタの割合

Question

私はjavascriptとdc.jsの新機能で、現在データ内の列の特定の値だけを調べるnumberDisplayを作成することができません。

私はダッシュボードをいくつかの異なるチャートで作成しましたが、私は現在、残りのチャートと共にフィルタリングする最後の数値表示に固執しています。

私のデータには、以下のような2つのフィールドが含まれています。私はSLAの「2日間」のパーセンテージnumberDisplayを作成しようとしています。

だから私はそれが30％を示すであろうようnumberDisplayは、グループ全体の中に「2日」の割合を返すように期待（10/30）

私が検索し、さまざまなソリューションを試みたが、唯一ました私がこれまでにやったことは、すべてのSLAの合計を表示することです。

var data = [{ 
"sla": "2 days", 
    "team": "hr", 
    "hits": 7 
}, { 
"sla": "2 days", 
    "team": "finance", 
    "hits": 1 
}, { 
"sla": "2 days", 
    "team": "finance", 
    "hits": 2 
}, { 
"sla": "3-4 days", 
    "team": "hr", 
    "hits": 5 
}, { 
"sla": "3-4 days", 
    "team": "hr", 
    "hits": 4 
}, { 
"sla": "5 days", 
    "team": "finance", 
    "hits": 3 
}, { 
"sla": "5 days", 
    "team": "hr", 
    "hits": 8 
}]; 

ありSLAで約6-7異なる可能なエントリがあり、私は現在、唯一のそれらの2または3の番号が表示を作成していますよ。

これを行うには、最も簡単で簡単な解決策は何でしょうか？

私がコメントを追加しました：私はこのサイト上のゴードンさんのコメントから、いくつかのガイダンスにこの感謝のためのソリューションおよびいくつかのさらなる研究を発見するために管理してきましたhttps://jsfiddle.net/kevinelphick/owx2L1wt/2/?utm_source=website&utm_medium=embed&utm_campaign=owx2L1wt

Answer 1

通常の還元を使用して、"fake group"を使用して個々の値を引き出すのはちょっときれいだと思います。我々はまた、パーセンテージを計算するために

function choose_bin(group, key) { 
    return { 
    value: function() { 
     return group.all().filter(kv => kv.key === key)[0].value; 
    } 
    } 
} 

：ここ

は、グループとキーを受け取り、そのキーでビンを返すvalue機能付きgroupAllスタイルのグループを返すラッパーですヒットの総数が必要です。我々はそれを得るためにdimension.groupAll()を使用することができます。

var allHits = slaDimension.groupAll().reduceSum(d => d.hits); 

私は（それが唯一の0％または100％をそのように表示されてしまうため）あなたはこれらの数字は円グラフによってフィルタリングしたくないことを、ここで想定しています。したがって、同じディメンションとグループを使用します（a group does not observe its own dimension's filters）。

私たちは、ラッパー関数に基づいてsla_2daysを定義します：

var sla_2days = choose_bin(slaGroup, '2 days') 

そして最後に、我々は割合の計算にnumberDisplayのvalueAccessorを定義します：ここにあなたのフィドルの

slaNumberDisplay 
    .group(sla_2days) 
    .valueAccessor(x => (x/allHits.value())*100) 

フォークを：https://jsfiddle.net/gordonwoodhull/sa2mL8wh/3/

Answer 2

：

私は、一例として、基本的なjsfiddleを作成しましたグループのいくつかの機能：

var slaGroup1 = all.reduce(
    function(p, v) { 
    p.count += v.hits; 
    p.slasum += (v.sla == "2 days" ? v.hits : 0); 
    p.slaPercent = p.count ? p.slasum/p.count : 0; 
    return p; 
    console.log(p.failures); 
    }, 
    function(p, v) { 
    p.count -= v.hits; 
    p.slasum -= (v.sla == "2 days" ? v.hits : 0); 
    p.slaPercent = p.count ? p.slasum/p.count : 0; 
    return p; 
    }, 
    function() { 
    return { 
     count: 0, 
     slasum: 0, 
     slaPercent: 0 
    }; 
    } 
); 

、その後、私のNumberDisplay値アクセサ：

slaNumberDisplay 
    .group(slaGroup1) 
    .formatNumber(d3.format(".1%")) 
    .valueAccessor(function (x) {return x.slaPercent;}); 

私は確かにこれを行うためのよりダイナミックな方法がありますか？異なる基準で複数の数値表示を作成したいのですか？グループ外の関数を作成できますか？グループは、ブラケットの中に設定された基準を使って関数を呼び出しますか？また、関数からパーセンテージを削除することもできます。これをAccessorという値で単純に行います。