d3.group 或 d3.rollup 的非嵌套输出？答案

【问题标题】：Un-nest output of d3.group or d3.rollup?d3.group 或 d3.rollup 的非嵌套输出？
【发布时间】：2019-07-05 17:46:23
【问题描述】：

我正在使用d3-arrayrollup做group-by like的计数操作，准备生成html表格。

我有可变数量的分组键，我是这样传递的：

var rollup_keys = new Map([
        ['count', v => v.length],
        ['codeversion', d => d.codeversion],
        ['mode', d => d.mode],
        ['status', d => d.status]])

    var data_counts = d3.rollup(all_data, ...rollup_keys.values())

这给了我嵌套的地图，例如伪表示，

Map(3) {"codeversion_1" => 
    Map(1) {"mode_1" => 
        Map(2) {"status_1" => count_1,
                "status_2" => count_2},
       "codeversion_2" =>
    Map(1) {"mode_1" =>
        Map(2) {"status_1" => count_1,
                "status_2" => count_2}
    [...truncated...]
}

我使用 Vue.js 的 for-loops 来渲染 html 表格，这意味着上面嵌套地图的平面表示是最简单的。类似的东西：：

[
    ["codeversion_1", "mode_1", "status_1", 1"],
    ["codeversion_1", "mode_1", "status_2", 49],
    ["codeversion_2", "mode_1", "status_1", 3],
    ["codeversion_2", "mode_1", "status_2", 7],
]

为了将嵌套地图转换为上述平面列表格式，我使用了这种递归方法：

flatten_data: function(flatten_me){
                let rows = []
                if ( flatten_me instanceof Map) {
                    for (let [key, value] of flatten_me.entries()) {
                        if (value instanceof Map) {
                            let _rows = this.flatten_data(value)
                            for (_row of _rows) {
                                rows.push([key].concat(_row))
                            }
                        } else {
                            rows.push([key, value])
                        }
                    }
                }
                return rows
            }

但是 d3-array 是否有一些原生的东西意味着我不必自己将其展平？我觉得我遗漏了一些明显的东西，但搜索 flatten array 似乎并没有给出我正在寻找的完整键值排列。

【问题讨论】：

能否请您为此添加一个有效的 jsfiddle ？

标签： javascript d3.js split-apply-combine

【解决方案1】：

如果没有一些示例数据，很难测试代码，但我建议使用 Array.reduce()。这是一个包含两个条件的示例。

const aggregator = (agg, cur) => agg.concat(
  Array.from(cur[1]).map(sportCount =>
    [cur[0]].concat(statusCount)
  )
);

const rolled = d3.rollup(athletes, v => v.length, d => d.mode, d => d.status);
const flattened = Array.from(rolled).reduce(aggregator, []);

【讨论】：