d3/dc.js 数据 table 中的分组总计

Question

我有一个用 dc.js 制作的数据 table，按月对数据进行分组并显示来自不同供应商的每日数据。我想在月份组的行中的 table 中包含每月总计。

这可能吗？这是我的 table:

的定义

aTable 
.dimension(dailyDimension)      
.group(function (d) {
    return formatDateMonth(parseDate(d.date));
})
.size(Infinity)
.columns([{
    label : 'Date',
    format : function(d) {
        return formatDateDay(parseDate(d.date))
    }
}, {
    label : 'Supplier',
    format : function (d) {
        return d.Supplier;
    }
}, {
    label : 'Volume',
    format : function (d) {
        return +d.total;
    }
}])

和fiddle：https://jsfiddle.net/urz6rjf8/

Answer 1

它不是 dc.js 中内置的东西，但您可以通过后处理步骤添加它。

这是一种方法：

var colspan = null;
aTable
    .on('pretransition', function (table) {
        var grouprow = table.selectAll('tr.dc-table-group').classed('info', true);
        // fetch previous colspan only once
        if(colspan === null) {
          colspan = +grouprow.select('td').attr('colspan') - 1;
        }
        // reduce colspan of group label by 1
        grouprow.selectAll('td.dc-table-label')
            .attr('colspan', colspan);
        // for each row, join td's to a single-element array
        // containing the sum. this is a trick to only create a child element once
        var sum = grouprow.selectAll('td.sum').data(function(d) {
          return [d.values.map(function(d) {
            return d.total;
          }).reduce(function(a, b) {
            return a+b;
          })];
        });
        sum.enter().append('td').attr('class', 'sum');
        sum.text(function(d) { return d; });
    });

首先我们 select 现有组标签行。我们需要将现有 tds（以及以后创建的任何）的 colspan 减少一个。（但我们应该只计算一次 colspan，否则它们会越来越小。）

然后我们可以为总和添加另一个td。这使用了一个技巧，你 selectAll 一个不存在的元素，并加入一个大小为 1 的数组。结果是如果元素不存在则创建该元素，但如果它已经存在则不会添加。

总和只是映射到值，然后用 + 减少。

最后我们设置td.sum的值，不管是不是新的

你的 fiddle 分支：https://jsfiddle.net/gordonwoodhull/at95n2zg/11/

d3/dc.js 数据 table 中的分组总计

Group totals in d3/dc.js data table

dc.js