D3：使用 .map() 重新排列数据数组答案

【问题标题】：D3: use .map() to rearrange an array of dataD3：使用 .map() 重新排列数据数组
【发布时间】：2014-07-02 19:50:32
【问题描述】：

如果我有这样的数据...

var dataset = [
    { apples: 5, oranges: 10, grapes: 22 },
    { apples: 4, oranges: 12, grapes: 28 },
    { apples: 2, oranges: 19, grapes: 32 },
    { apples: 7, oranges: 23, grapes: 35 },
    { apples: 23, oranges: 17, grapes: 43 }
];

如何使用 .map() 方法重新排列数据，使其成为一个数组数组，每个数组代表一个类别（苹果、橙子、葡萄），该数组中的每个对象都是数据。 x 是一个 ID 标记。

var dataset = [
    [
            { x: 0, y: 5 },
            { x: 1, y: 4 },
            { x: 2, y: 2 },
            { x: 3, y: 7 },
            { x: 4, y: 23 }
    ],
    [
            { x: 0, y: 10 },
            { x: 1, y: 12 },
            { x: 2, y: 19 },
            { x: 3, y: 23 },
            { x: 4, y: 17 }
    ],
    [
            { x: 0, y: 22 },
            { x: 1, y: 28 },
            { x: 2, y: 32 },
            { x: 3, y: 35 },
            { x: 4, y: 43 }
    ]

];

【问题讨论】：

标签： javascript arrays d3.js

【解决方案1】：

一种方法是为每个键（水果）使用map 为该水果创建所有对象：

newDataset = ["apples", "oranges", "grapes"].map(function(n){
    return dataset.map(function(d, i){
               return { x: i, y: d[n] };
           });
    });

注意，传递给map的匿名函数中的i是dataset数组的索引，所以可以作为ID。

【讨论】：

【解决方案2】：

您也可以通过.reduce() 一次性完成此操作

dataset.reduce(function(previous, current, index, array){
    return Object.keys(current).map(function(d, i){
        return previous[i].concat([{'x' : i, 'y' : current[d]}]);
    });
}, [[],[],[]]);

这从一个空的数组骨架开始，并在每次迭代时在每个数组中填充一个内部对象。

当然，这涉及在构建新数组时循环每个对象内的键，因此循环本身并不比 mdml 答案中的那个更有效，但它没有初始分配，因此是一个操作更高效，因此显然是更好的答案：P

【讨论】：