dc.js / Crossfilter-顯示所選尺寸的分數？

Question

我有兩個dc.barChart和兩個dc.NumberDisplay 。

JS小提琴在這里： 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);

注意，在上面的代碼中，“成就”是根據圖表變量名稱和數據屬性中的不同拼寫以兩種不同的方式拼寫的。 這里不是在批評拼寫，而只是指出它是因為它可能會使其他人混淆這個問題:-)