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>")