javascript - 将平面表转换为层次结构

标签 javascript d3.js multidimensional-array

我想将表格从 csv 转换为层次结构。该表具有以下格式:

lvl1 lvl2 lvl3 size
   A    a    1    1
   A    a    2    2
   A    b    1    3
   A    b    2    4
   B    a    1    5
   B    a    2    6
   B    b    1    7
   B    b    2    8
转换为下面的 JSON 对象。
我用过 d3.nest像这样:
var n = d3.nest()
  .key(d => d.lvl1)
  .key(d => d.lvl2)
  .key(d => d.lvl3)
  .entries(d)
这导致以下格式,这几乎是我想传递给 d3.hierarchy 的格式:
[{
    "key": "A",
    "values": [{
      "key": "a",
      "values": [{
          "key": "1",
          "values": [{
            "lvl1": "A",
            "lvl2": "a",
            "lvl3": 1,
            "size": 1
          }]
        },
        {
          "key": "2",
          "values": [{
            "lvl1": "A",
            "lvl2": "a",
            "lvl3": 2,
            "size": 2
          }]
        }
      ]
    }]
  }
  //...
]

但是,这增加了一个级别太多,理想情况下我希望有以下输出:
[{
    "key": "A",
    "values": [{
      "key": "a",
      "values": [{
          "key": "1",
          "size": 1
        },
        {
          "key": "2",
          "size": 2
        }
      ]
    }]
  } //,...
]
这种格式我可以方便地传递给 d3.hierarchy(n, d => d.values) .如何做到这一点?
注意我不在乎叶子中是否有其他字段,因此,只要叶子没有再次嵌套,这样的输出也可以:
[{
    "key": "A",
    "values": [{
      "key": "a",
      "values": [{
          "key": "1",
          "lvl1": "A",
          "lvl2": "a",
          "lvl3": 1,
          "size": 1
        },
        {
          "key": "2",
          "lvl1": "A",
          "lvl2": "a",
          "lvl3": 2,
          "size": 2

        }
      ]
    }]
  } //,...
]

JSON
[{
    "lvl1": "A",
    "lvl2": "a",
    "lvl3": 1,
    "size": 1
  },
  {
    "lvl1": "A",
    "lvl2": "a",
    "lvl3": 2,
    "size": 2
  },
  {
    "lvl1": "A",
    "lvl2": "b",
    "lvl3": 1,
    "size": 3
  },
  {
    "lvl1": "A",
    "lvl2": "b",
    "lvl3": 2,
    "size": 4
  },
  {
    "lvl1": "B",
    "lvl2": "a",
    "lvl3": 1,
    "size": 5
  },
  {
    "lvl1": "B",
    "lvl2": "a",
    "lvl3": 2,
    "size": 6
  },
  {
    "lvl1": "B",
    "lvl2": "b",
    "lvl3": 1,
    "size": 7
  },
  {
    "lvl1": "B",
    "lvl2": "b",
    "lvl3": 2,
    "size": 8
  }
]

最佳答案

您可以通过 rollup 获得您想要的东西:

const n = d3.nest()
  .key(d => d.lvl1)
  .key(d => d.lvl2)
  .rollup(d => d.map(e => ({
    key: e.lvl3,
    size: e.size
  })))
  .entries(data);
这是演示:

const data = [{
    "lvl1": "A",
    "lvl2": "a",
    "lvl3": 1,
    "size": 1
  },
  {
    "lvl1": "A",
    "lvl2": "a",
    "lvl3": 2,
    "size": 2
  },
  {
    "lvl1": "A",
    "lvl2": "b",
    "lvl3": 1,
    "size": 3
  },
  {
    "lvl1": "A",
    "lvl2": "b",
    "lvl3": 2,
    "size": 4
  },
  {
    "lvl1": "B",
    "lvl2": "a",
    "lvl3": 1,
    "size": 5
  },
  {
    "lvl1": "B",
    "lvl2": "a",
    "lvl3": 2,
    "size": 6
  },
  {
    "lvl1": "B",
    "lvl2": "b",
    "lvl3": 1,
    "size": 7
  },
  {
    "lvl1": "B",
    "lvl2": "b",
    "lvl3": 2,
    "size": 8
  }
];

var nested = d3.nest()
  .key(d => d.lvl1)
  .key(d => d.lvl2)
  .rollup(d => d.map(e => ({
    key: e.lvl3,
    size: e.size
  })))
  .entries(data);

console.log(nested);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

关于javascript - 将平面表转换为层次结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66256140/

相关文章:

javascript - 再次刷新发布值,导致再次进入数据库

arrays - 在 Swift 中对多维数组(数组中的数组)使用排序?

javascript - Momentjs 格式 : apply italic text styling

javascript - 面板标题中带有复选框的 Accordion

javascript - 对 D3 中可折叠树形图中父节点上的 "Number of child' s 进行编号

javascript - d3 堆叠条形图中工具提示的 x 位置不起作用

php,mysql - 将结果组合成多维关联数组

c++ - 如何在 cereal 上序列化多维数组,C++ 序列化库

javascript - 使用 JavaScript 以编程方式创建表单域

javascript - 在 CodeIgniter 中加载 Controller 后运行 javascript