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

我有两个

dc.barChart

s和两个

dc.NumberDisplay

s

JS Fiddle在这里：

其中一个数字显示所选总人口的总数。另一个当前显示所有其他维度中被选中的分数——我想让它显示手边维度中被选中的分数。例如，因为它的维度是“成就”，如果笔刷位于[10,90]，我希望它显示100%。但是，如果画笔位于[31,90]，我希望它显示90%，因为总共有11个案例，画笔超过了10个。我如何让它显示笔刷选择的案例比例

还包括以下内容：

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();

---

如上所述，您当前可能必须根据从dc.js图表中提取的过滤器，对原始数据进行此计算。下面是一个如何执行此操作的示例：

关键在于创建一个假组，并计算与您感兴趣的图表上的当前过滤器匹配的数据元素的数量：

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.js图表中提取的过滤器对原始数据进行此计算。下面是一个如何执行此操作的示例：

关键在于创建一个假组，并计算与您感兴趣的图表上的当前过滤器匹配的数据元素的数量：

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

---

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

因此，如果只过滤了一个维度，您需要计算过滤器中的记录数？是的。团体的DOC说：“一个分组与交叉过滤器的当前过滤器相交，除了关联维度的过滤器。因此，组方法只考虑满足除维度过滤器之外的每一个过滤器的记录。”基本上，我想要与之相反的——我只想考虑满足维度过滤器的记录。理解。对于这个简单的例子，我认为最好的方法是在交叉过滤器之外对原始数据进行计算。然而，由于维度上的这种元数据对于可视化应用程序来说是非常重要和有用的信息，因此我们应该考虑将其添加到交叉过滤器中。您能否在交叉过滤器项目中创建一个问题？好主意，可以，@ethan jewett。所以如果只过滤了一个维度，你需要计算过滤器中的记录数？是的。团体的DOC说：“一个分组与交叉过滤器的当前过滤器相交，除了关联维度的过滤器。因此，组方法只考虑满足除维度过滤器之外的每一个过滤器的记录。”基本上，我想要与之相反的——我只想考虑满足维度过滤器的记录。理解。对于这个简单的例子，我认为最好的方法是在交叉过滤器之外对原始数据进行计算。然而，由于维度上的这种元数据对于可视化应用程序来说是非常重要和有用的信息，因此我们应该考虑将其添加到交叉过滤器中。您能否在交叉过滤器项目中创建一个问题？“好主意，行，”伊桑·杰维特说。