Javascript dc.js渲染条形图

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

q、 年份、类别、子类别、总计，
2010年第一季度，x，xa，200
2010年第二季度，y，yb，100
2010年第三季度，x，xa，300
2010年第四季度，z，zb，45
2010年第一季度，x，xa，80
2010年第二季度，y，yb，200
2010年第三季度，x，xc，301
2010年第四季度，z，za，205
2011年第一季度，x，xa，80
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();

});

---

默认的

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，totalexpense:0}

。您需要传递valueAccessor来提取数值，如

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

另外，我假设您有输入错误，并且确实希望使用

p.totalexpense

而不是

p.total

。但您可以通过以下方式进一步简化：

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

这将返回一个无需定制dc即可理解的

.valueAccessor

函数。更简单的是，crossfilter已经为此提供了一个方便的功能：

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

DC具有创建回调的实用程序：

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

---

你想要什么样的结果？我想在条形图中得到每年每个季度的总拉力。。所以应该是每年4个小节。你能给出示例图表图像或示例吗？看这对你有用吗？有道理，但我正在尝试将dc.js库应用于数据集，在一个会计年度维度内围绕四分之一维度旋转数据。图形是我正在寻找的最终结果，但不是以我希望的方式呈现/绘制它！我能够在一个会计年度内按季度对图表进行渲染和分组：）