D3 中的数组转换

Question

从中转换数组的最佳方法是什么

[{
  "state": "vic",
  "age_group_1": 10,
  "age_group_2": 20,
  "age_group_3": 30,
  "age_group_4": 40,
  "age_group_5": 50,
}, {
  "state": "nsw",
  "age_group_1": 60,
  "age_group_2": 70,
  "age_group_3": 80,
  "age_group_4": 90,
  "age_group_5": 100,
}, {
  "state": "tas",
  "age_group_1": 11,
  "age_group_2": 21,
  "age_group_3": 31,
  "age_group_4": 41,
  "age_group_5": 51,
}, {
  "state": "qld",
  "age_group_1": 61,
  "age_group_2": 71,
  "age_group_3": 81,
  "age_group_4": 91,
  "age_group_5": 101,
}]

到这里

[{
  "age_group": "age_group_1",
  "states": [{
    "name": "vic",
    "value": 10
  }, {
    "name": "nsw",
    "value": 60
  }, {
    "name": "tas",
    "value": 11
  }, {
    "name": "qld",
    "value": 61
  }]
}, {
  "age_group": "age_group_2",
  "states": [{
    "name": "vic",
    "value": 20
  }, {
    "name": "nsw",
    "value": 70
  }, {
    "name": "tas",
    "value": 21
  }, {
    "name": "qld",
    "value": 71
  }]
}, {
  "age_group": "age_group_3",
  "states": [{
    "name": "vic",
    "value": 30
  }, {
    "name": "nsw",
    "value": 80
  }, {
    "name": "tas",
    "value": 31
  }, {
    "name": "qld",
    "value": 81
  }]
}, {
  "age_group": "age_group_5",
  "states": [{
    "name": "vic",
    "value": 40
  }, {
    "name": "nsw",
    "value": 90
  }, {
    "name": "tas",
    "value": 41
  }, {
    "name": "qld",
    "value": 91
  }]
}, {
  "age_group": "age_group_5",
  "states": [{
    "name": "vic",
    "value": 50
  }, {
    "name": "nsw",
    "value": 100
  }, {
    "name": "tas",
    "value": 51
  }, {
    "name": "qld",
    "value": 101
  }]
}]

我可以使用简单的 javascript 和循环，但我想使用 d3 函数或任何其他处理数据转换的库。

哪个是数据转换的最佳库。

Answer 1

您可以使用临时对象来引用结果数组。

var data = [{ "state": "vic", "age_group_1": 10, "age_group_2": 20, "age_group_3": 30, "age_group_4": 40, "age_group_5": 50, }, { "state": "nsw", "age_group_1": 60, "age_group_2": 70, "age_group_3": 80, "age_group_4": 90, "age_group_5": 100, }, { "state": "tas", "age_group_1": 11, "age_group_2": 21, "age_group_3": 31, "age_group_4": 41, "age_group_5": 51, }, { "state": "qld", "age_group_1": 61, "age_group_2": 71, "age_group_3": 81, "age_group_4": 91, "age_group_5": 101, }],
       result = [];

data.forEach(function (a) {
    Object.keys(a).forEach(function (k) {
        if (k !== 'state') {
            if (!this[k]) {
                this[k] = { age_group: k, states: [] };
                result.push(this[k]);
            }
            this[k].states.push({ name: a.state, value: a[k] });
        }
    }, this);
}, {});

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

Answer 2

利用现代 JS 而不是试图让 D3 做到这一点 - 这是非常简单的代码：

var basedata = the original array from your question;

// I assume your data already has this array of categories somewhere,
// but if it doesn't, let's just declare it here:
var age_groups = [
  "age_group_1",
  "age_group_2",
  "age_group_3",
  "age_group_4",
  "age_group_5"
];

var transformed = age_groups.map(group => {
  return {
    age_group: group,
    states: basedata.map(set => {
      return { state: set.state, value: set[group] }
    })
  };
});

完成了。

之所以可行，是因为您希望对象锁定在您的年龄段，因此我们首先要确保基于这些对象创建映射。然后，对于每个年龄组，我们只需遍历基础数据并返回状态/值对。没什么复杂的，ES6/ES2015 为我们完成了这项工作。

不喜欢 ES6/ES2015？与时俱进的好机会，但也很容易重写为旧的 ES5 格式：将每个 (...) => { ... } 替换为 function(...) { return ... } 并完成。

Answer 3

你可以试试这样的：

var data=[{state:"vic",age_group_1:10,age_group_2:20,age_group_3:30,age_group_4:40,age_group_5:50},{state:"nsw",age_group_1:60,age_group_2:70,age_group_3:80,age_group_4:90,age_group_5:100},{state:"tas",age_group_1:11,age_group_2:21,age_group_3:31,age_group_4:41,age_group_5:51},{state:"qld",age_group_1:61,age_group_2:71,age_group_3:81,age_group_4:91,age_group_5:101}];

var _tmp = {}
var kepReg = /^age_group/;
data.forEach(function(item) {
  for (var k in item) {
    if (kepReg.test(k)) {
      if (!_tmp[k])
        _tmp[k] = {
          state: []
        };
      _tmp[k].state.push({
        name: item["state"],
        value: item[k]
      })
    }
  }
});

var result = Object.keys(_tmp).map(function(k) {
  return {
    age_group: k,
    states: _tmp[k].state
  }
});

document.write("<pre>" + JSON.stringify(result, 0, 4) + "</pre>")