dc.js渲染条形图

Question

我正在尝试使用dc.js库渲染条形图。 我的csv数据集的格式如下：

  

q，年份，类别，子类别，总数，
  q1,2010，x，xa，200
  q2,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轴上每列的高度。默认情况下，它假定您可以使用crossfilter组返回的值。所以它期望像：

console.log(group.all())

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

但是你使用自定义reduce函数返回一个对象。

您的对象将如下所示：

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