dc.js渲染條形圖

Question

我想使用dc.js庫渲染條形圖。 我的CSV數據集被格式化，像這樣：

Q，一年，類別，子類別，總共
第一季度，2010年，X，XA，200
第二季度，2010年，Y，YB，100
Q3 ，2010，X，XA，300
Q4，2010，Z，ZB，45
Q1，2010，X，XA，80
Q2，2010，Y，YB，200
Q3，2010，X，XC ，301
q4，2010，z，za，205
Q1，2011，X，XA，80
Q2，2011，Y，YB，200
Q3，2011，X，XC，301
Q4，2011，Z，ZA，205

到目前爲止，我可以得到一個條形圖，但實際的數據並未呈現給圖表，而且x軸上的縮放比例也是關閉的，因爲它應該是按年計算的。我無法將數據附加到圖表。這是一切，我已經能夠通過d3.csv得到

我在加載數據如下：

d3.csv("records.csv", function(csv) { 
    var data = crossfilter(csv); 

    var fiscalyear = data.dimension(function (d) { 
     return d.year; 
    }); 

    var spendGroup = fiscalyear.group().reduce(
     function(p,v) { 
      return p.total += v.total; 
     }, 
     function(p,v) { 
      return p.total -= v.total; 
     }, 
     function() { 
      return {totalSpend:0}; 
     } 
    ); 

fiscalyearchart.width(600) 
    .height(300) 
    .margins({top: 10, right: 50, bottom: 30, left: 60}) 
    .dimension(fiscalyear) 
    .group(spendGroup) 
    .x(d3.scale.linear().domain([2010,2013])) 
    .renderHorizontalGridLines(true) 
    .centerBar(true) 
    .elasticY(true) 
    .brushOn(true); 

    dc.renderAll(); 

}); 

Answer 1

默認valueAccessor確定每個柱的高度在Y軸上。默認情況下，它會假定您可以使用交叉過濾器組返回的值。因此，預計這樣的：

console.log(group.all()) 

// [{key: 2010, value: 1}, 
// {key: 2011, value: 2}] 

但相反，您使用的是自定義的減少函數返回一個對象。

你的對象將是這樣的：

console.log(group.all()) 

// [{key: 2010, value: {total:NaN, totalSpend:0}}, 
// {key: 2011, value: {total:NaN, totalSpend:0}}] 

DC不知道如何處理類似的值是什麼：{total:NaN, totalSpend:0}。你需要傳遞一個valueAccessor提取像

chart.valueAccessor(function(d) {return d.totalSpend;}); 

另外一個數值，我相信你有一個錯字，真正想用p.totalSpend而非p.total。但是你可以通過只是在做進一步簡化：

var spendGroup = fiscalyear.group().reduce(
    function(p,v) { 
     return p += v.total; 
    }, 
    function(p,v) { 
     return p -= v.total; 
    }, 
    function() { 
     return 0; 
    } 
); 

，這將返回一個.valueAccessor功能DC無需定製可以理解。更容易不過，crossfilter已經有這個方便的功能：

var spendGroup = fiscalyear.group().reduceSum(function(d) {return d.total;}); 

和DC具有實用程序來創建回調：

var spendGroup = fiscalyear.group().reduceSum(dc.pluck('total'));