如何使用rollup为D3.js堆叠条形图准备测试结果统计数据

问题核心原因 #

• d3.rollup返回的是InternMap类型，不是数组，无法直接调用数组的map方法，需要先通过Array.from()将Map转为键值对数组
• 原有代码存在拼写错误，同时Map结构没有.key/.value属性，需要用解构的方式取出键和值

方案1：生成堆叠条形图直接可用的层级数据（保留rollup用法） #

你之前的日期解析、rollup统计逻辑完全不需要修改，只需要替换后续的转换代码即可：

// 你之前的rollup统计逻辑保持不变
let data_count = d3.rollup(jsonObj, v => v.length, d => d.Date, d => d.Result)

// 新增Map转数组+堆叠计算逻辑
let processed_data = Array.from(data_count.entries()).map(([date, resultMap]) => {
  let y0 = 0;
  let total = 0;
  // 内层结果统计Map也转为数组遍历
  const values = Array.from(resultMap.entries()).map(([result, count]) => {
    const return_object = {
      result,
      count,
      y0: y0,
      y1: y0 + count
    };
    y0 += count;
    total += count;
    return return_object;
  });
  return {
    date,
    values,
    total
  };
});

转换后的数据可以直接用于D3堆叠条形图的渲染，不需要额外处理。

方案2：生成适配案例的宽表格式 #

如果需要适配你提到的「日期+三类结果数量」的CSV输入格式，用以下代码转换即可：

const resultTypes = ['OK', 'NOK', 'Aborted']
let wideFormatData = Array.from(data_count.entries()).map(([date, resultMap]) => {
  // 可根据需求调整日期输出格式
  const dateStr = d3.timeFormat("%d-%m-%Y %H:%M:%S")(date)
  const row = { Date: dateStr }
  resultTypes.forEach(type => {
    // 单日无对应结果时默认补0
    row[type] = resultMap.get(type) || 0
  })
  return row
})

转换后的wideFormatData结构和你给出的案例CSV结构完全匹配，可以直接代入对应案例使用。

内容的提问来源于stack exchange，提问作者j_tum