3

我正在尝试使用 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
第三季度，2011 年，x，xc，301
第四季度，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();

});
4

1 回答 1

7

默认值valueAccessor确定 Y 轴上每列的高度。默认情况下，它假定您可以使用交叉过滤器组返回的值。所以它期望像：

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'));
于 2013-10-18T00:41:47.567 回答