Question

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

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

其中一个数字显示显示所选总人口的总数。另一个目前显示所选择的所有其他维度的分数 - 我希望它显示所选择的当前维度的分数。例如，因为它的尺寸是Achievement，如果画笔是[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);

请注意上面的代码，＆＃39;成就＆＃39;根据图表变量名称和数据属性中的不同拼写，拼写有两种不同的拼写方式。不是在这里批评拼写，而是指出它，因为它可能会让其他人对这个问题感到困惑： - ）

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

1 个答案: