dc.js/Crossfilter - 選択した次元の一部を表示しますか？

Question

私は2つのdc.barChartと2つのdc.NumberDisplayを持っています。

JSフィドルはここにあります：https://jsfiddle.net/wgbruqk8/6/。

数値ディスプレイの1つには、選択されている集団全体の合計が表示されます。もう一方は選択されている他のすべての次元の割合を表示しています。選択した次元の割合を表示したいと思います。たとえば、次元が「成果」であるため、ブラシが[10,90]にある場合、100％を表示したいと思います。しかし、ブラシが[31、90]にある場合、11件の合計ケースがあり、ブラシが10個を超えているため、90％を表示したいと思います。ブラシが選択したケースの割合をどのように表示させるのですか？また、下記のJSを含む

：前述したように

data = [{'achievement': 30,'balance': 35}, 
       {'achievement': 46, 'balance': 35}, 
     {'achievement': 72, 'balance': 33}, 
     {'achievement': 50, 'balance': 29}, 
     {'achievement': 55, 'balance': 38}, 
     {'achievement': 70, 'balance': 40}, 
     {'achievement': 85, 'balance': 42}, 
     {'achievement': 80, 'balance': 41}, 
     {'achievement': 46, 'balance': 35}, 
     {'achievement': 46, 'balance': 35}, 
     {'achievement': 46, 'balance': 35},]; 

console.log(data); 

var chartMargins = {top: 10, right: 30, bottom: 20, left: 40}; 

var ndx = crossfilter(data), 
    all = ndx.groupAll(), 
    countAll = all.reduceCount(), 

    achievement = ndx.dimension(function(d) { 
      return d.achievement; 
     }), 
    achievementGroup = achievement.group(Math.floor), 
    balance = ndx.dimension(function(d) { 
      return d.balance; 
     }), 
    balanceGroup = balance.group(Math.floor); 


var achievementChart = dc.barChart('#dc-achievement-chart') 
      .width(600) 
      .height(80) 
      .margins(chartMargins) 
      .dimension(achievement) 
      .group(achievementGroup) 
      .x(d3.scale.linear().domain([0,100])); 

var balanceChart = dc.barChart('#dc-balance-chart') 
      .width(700) 
      .height(80) 
      .margins(chartMargins) 
      .dimension(balance) 
      .group(balanceGroup) 
      .centerBar(true) 
      .x(d3.scale.linear().domain([0,100]).rangeRound([0, 10*100])) 
      .filter([40,100]); 

dc.numberDisplay('#dc-overall-total') 
     .width(100) 
     .valueAccessor(function(d) { return d/11}) 
     .formatNumber(d3.format('%')) 
     .group(ndx.groupAll()); 

dc.numberDisplay('#dc-achievement-selection') 
    .valueAccessor(function(d) { return d/11}) 
    .formatNumber(d3.format('%')) 
    .group(achievement.groupAll()); 

dc.renderAll(); 

Answer 1

は、あなたは現在、おそらくフィルタに基づいて、生データに対してこの計算をしなければならないあなたのdc.jsチャートから引っ張りました。ここでそれを行う方法の例です：https://jsfiddle.net/jy8zh18a/1/

キーは偽のグループを作成し、あなたが興味を持っているものは何でもチャート上の現在のフィルタに一致するデータ要素の数を計算するために、基本的である：

var acheivementSelectGroup = { 
    value: function() { 
    var acheivementFilter = achievementChart.filter(); 
    var selectedValues = data.filter(function(d) { 
     if(acheivementFilter) { 
     return acheivementFilter[0] <= d['achievement'] && 
      d['achievement'] <= acheivementFilter[1]; 
     } else { 
     return true; 
     } 
    }).length; 
    return selectedValues; 
    } 
} 

は、その後、あなたの番号表示でその偽のグループを使用します。

dc.numberDisplay('#dc-achievement-selection') 
    .valueAccessor(function(d) { return d/11}) 
    .formatNumber(d3.format('%')) 
    .group(acheivementselectyroup); 

注コードで上記の「成果」はチャートの変数名とデータ属性の異なるスペルに基づいて2種類の方法で綴られています。