如何将双键构建的d3.rollup转换为适配堆叠柱状图的扁平对象数组

你需要的核心是利用两个JS原生特性，完全不用手动遍历拼接键值对，也不需要手动拆分配对键和值：

• 之前你尝试拆分cities.keys()和cities.values()再配对的思路，本质上多做了一步冗余操作——Map本身的遍历结果就是有序的[键, 值]二元组，完全可以直接传入Object.fromEntries()一步转换成对应的普通键值对对象
• 结合JS的对象展开运算符，可以把转换后的城市键值对，和固定的category字段合并成同一个新对象，不需要逐字段手动赋值

直接在你写的Array.from回调里，对内层城市Map做转换并展开即可：

const formattedData = Array.from(myRollup, ([category, citiesMap]) => ({
  category,
  // 直接把内层Map转成的对象整体展开，自动带上所有城市的键值
  ...Object.fromEntries(citiesMap)
}));

对于你给出的嵌套Map结构，这段代码的输出完全匹配你期望的目标结构：

[
  {category: "television", city1: 3673, city2: 6712},
  {category: "web", city1: 124, city2: 876},
  {category: "film", city1: 243, city2: 678}
]

这种写法是纯声明式的，不需要预先知道具体有哪些城市字段、有多少个城市，就算后续d3.rollup生成的城市键变多、变少、名称变化，代码不需要任何修改就能自动适配结构，不存在手动拼接键值对的冗余逻辑。

补充：如果后续遇到3层及以上的嵌套Map结构（比如增加了第三个分组维度），只需要对每一层的Map递归做同样的Object.fromEntries转换即可，逻辑是通用的。

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