dc.js / Crossfilter-显示所选尺寸的分数？

Question

I have two dc.barChart s and two dc.NumberDisplay s.

JS Fiddle is here: https://jsfiddle.net/wgbruqk8/6/ .

One of the number displays shows the total of the overall population that is selected. The other currently shows the fraction of all other dimensions that are selected -- I'd like for it to show the fraction of the dimension at hand that is selected. For example, since its dimension is Achievement, if the brush is at [10,90], I'd like for it to show 100%. However, if the brush is at [31, 90], I'd like for it to show 90% because there are 11 total cases and the brush is over 10 of them. How do I have it show the proportion of cases that the brush has selected?

Also including the JS below:

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

As mentioned above, you currently probably have to do this calculation against the raw data, based on filters pulled from your dc.js chart. Here is an example of how to do it: https://jsfiddle.net/jy8zh18a/1/

The key is basically to create a fake group and calculate the number of data elements that match the current filter on whatever chart you are interested in:

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

Then use that fake group in your number display:

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

Note in the code above, 'achievement' is spelled in 2 different ways based on the different spellings in the chart variable name and the data attribute. Not critiquing spelling here, but just pointing it out as it might be confusing to others coming at this problem :-)