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' 根据图表变量名称和数据属性中的不同拼写，有两种不同的拼写方式。不是在这里批评拼写，只是指出它，因为它可能会让其他遇到这个问题的人感到困惑:-)

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

dc.js/Crossfilter - show fraction of dimension selected?

javascript

crossfilter

dc.js