dc.js/Crossfilter - seçilen boyutun bölümünü gösterilsin mi?

Question

İki dc.barChart s ve iki dc.NumberDisplay s var.

JS Fiddle burada: https://jsfiddle.net/wgbruqk8/6/.

Numara ekranlarından biri, seçilen genel popülasyonun toplamını gösterir. Diğeri, şu anda seçilen tüm diğer boyutların kesirliğini gösterir - bunun için seçilen boyutun kesirliğini göstermek için bunu istiyorum. Örneğin, boyutu Başarı olduğundan, fırça [10,90] ise,% 100 göstermesini isterim. Bununla birlikte, eğer fırça [31, 90] 'da ise,% 90'ını göstermesini isterim çünkü toplamda 11 tane durum vardır ve fırça onlardan 10'udur. Fırçanın seçtiği vakaların oranını nasıl gösterebilirim? Ayrıca aşağıda JS dahil

: Yukarıda belirtildiği gibi

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

, şu anda muhtemelen filtrelere göre ham verilere karşı bu hesaplamayı, yapmak zorunda sizin dc.js grafikten çekti.

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

: https://jsfiddle.net/jy8zh18a/1/

anahtar sahte grup oluşturmak ve ilgilendiğiniz ne olursa olsun grafik üzerinde akım filtreyle eşleşen veri elemanlarının sayısını hesaplamak için temelde: İşte bunu nasıl örneğidir

Öyleyse numara ekranda o sahte grup kullanın:

dc.numberDisplay('#dc-achievement-selection') 
    .valueAccessor(function(d) { return d/11}) 
    .formatNumber(d3.format('%')) 
    .group(acheivementselectyroup); 

Not kodunda yukarıdaki, 'başarı' grafik değişken adı ve veri özelliğinde farklı yazımlar dayalı 2 farklı şekilde yazıldığından. Burada yazımı eleştirmekle kalmayıp, yalnızca bu soruna yaklaşan diğer kullanıcılara kafa karıştırıcı olabileceğine işaret ediyor :-)