dc.js渲染条形图-Java 学习之路

我正在尝试使用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轴上的缩放也是关闭的，因为它应该根据年份 . 我很难将数据附加到图表中 . 这就是我能得到的一切

enter image description here

我通过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();

});

1 回答

8
默认 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'));
```
回复于 2024-05-01T13:05:25+08:00

dc.js渲染条形图

1 回答

相关问题