javascript - dc.js/Crossfilter - 显示所选维度的分数？

Question

我有两个 dc.barChart 和两个 dc.NumberDisplay。

JS Fiddle 在这里:https://jsfiddle.net/wgbruqk8/6/ .

显示的数字之一显示了所选总体人口的总数。另一个当前显示所选所有其他维度的分数 - 我希望它显示当前所选维度的分数。例如，由于它的维度是成就，如果画笔位于[10,90]，我希望它显示100%。但是，如果画笔位于 [31, 90]，我希望它显示 90%，因为总共有 11 个案例，而画笔超过了 10 个。如何让它显示画笔选择的案例比例？

还包括下面的 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);

请注意，在上面的代码中，根据图表变量名称和数据属性中的不同拼写，“achievement”有两种不同的拼写方式。这里不是批评拼写，只是指出它，因为它可能会让其他遇到这个问题的人感到困惑:-)