Javascript d3.js如何按指定顺序列出列？

我有一个javascript对象数据：

[
  { 'sex': 'male', 'risk': '0.04', 'age_group': 'old' },
  { 'sex': 'female', 'risk': '0.03', 'age_group': 'young' },
  { 'sex': 'male', 'risk': '0.12', 'age_group': 'old' },
  { 'sex': 'female', 'risk': '0.04', 'age_group': 'old' },
]

['sex', 'age_group', 'risk']

我还有一个数组，用于指定名为元数据的列的顺序：

[
  { 'sex': 'male', 'risk': '0.04', 'age_group': 'old' },
  { 'sex': 'female', 'risk': '0.03', 'age_group': 'young' },
  { 'sex': 'male', 'risk': '0.12', 'age_group': 'old' },
  { 'sex': 'female', 'risk': '0.04', 'age_group': 'old' },
]

['sex', 'age_group', 'risk']

当使用d3.js可视化数据时（目前我使用的是一个表），我需要根据元数据将它们按正确的顺序排列

下面是我用来生成表的代码，不需要对列排序

    var table = d3.select("#visualization_table");
    table.append("thead");
    table.append("tbody");

    var thead = d3.select("thead")
        .selectAll("th")
        .data(metadata)
        .enter()
        .append("th")
        .text(function(d) { return d });
    var tr = d3.select("tbody").selectAll("tr")
        .data(data)
        .enter()
        .append("tr");
    var td = tr.selectAll("td")
        .data(function(d) {return d3.values(d)})
        .enter()
        .append("td")
        .text(function(d) {return d});

---

但顺序是‘性’、‘风险’、‘年龄组’，而我想要的是‘性’、‘年龄组’、‘风险’。有人能帮忙吗？

您可以通过使用

元数据在嵌套的
.data（）
调用中显式构造对象来完成此操作：

.data(function(d) {
  return metadata.map(function(m) { return d[m]; });
})

完成演示