将平面数组转换为分层数组答案

【问题标题】：Convert flat arrays to hierarchical将平面数组转换为分层数组
【发布时间】：2020-02-26 16:23:44
【问题描述】：

我在将平面列表转换为分层列表时遇到了一些问题。我试图从下面的数据中可视化 d3.js 树形图。每个节点都有fams数组中描述的两个子对象。

我在这里发现了与我的问题类似的问题，但我无法使用两个父节点 Converting flat structure to hierarchical

这是我要存档的https://bl.ocks.org/d3noob/8329404

希望有人能指出正确的方向，提前谢谢。

let nodes = [
{ id: 'N001', fam: 'F001' },
{ id: 'N002', fam: 'F002' },
{ id: 'N003', fam: 'F003' },
{ id: 'N004', fam: 'F004' },
{ id: 'N005', fam: 'F005' },
{ id: 'N006', fam: 'F006' },
{ id: 'N007', fam: 'F007' },
{ id: 'N008', fam: 'F008' },
{ id: 'N009', fam: 'F009' },
{ id: 'N010', fam: 'F010' },
{ id: 'N011', fam: 'F011' }
];

let fams = [
{ id: 'F001', p1: 'N002', p2: 'N003' },
{ id: 'F002', p1: 'N004', p2: 'N005' },
{ id: 'F003', p1: 'N006', p2: 'N007' },
{ id: 'F004', p1: 'N008', p2: 'N009' },
{ id: 'F005', p1: 'N010', p2: 'N011' }
];

// Expected output
let finalData = [
{
id: 'N001',
children: [
  {
    id: 'N002',
    fam: 'F002',
    children: [
      {
        id: 'N004',
        fam: 'F004',
        children: [
          { id: 'N008', fam: 'F008' },
          { id: 'N009', fam: 'F009' }
        ]
      },
      {
        id: 'N005',
        fam: 'F005',
        children: [
          { id: 'N010', fam: 'F010' },
          { id: 'N011', fam: 'F011' }
        ]
      }
    ]
  },
  {
    id: 'N003',
    fam: 'F003',
    children: [
      { id: 'N006', fam: 'F006' },
      { id: 'N007', fam: 'F007' }
    ]
  }
]
}
];

【问题讨论】：

您好像忘记添加遇到问题的代码了..？另请注意，此问题与JSON 无关。
不相关：祝贺 D3 问题编号 35000。人类喜欢这些整数，无论出于何种原因。

标签： javascript d3.js hierarchical-data

【解决方案1】：

一种可能的解决方案是循环 nodes 数组以创建一个新属性 (parentId)，基于 fams，它描述了父级（null，如果没有）：

nodes.forEach(function(d) {
  const fam = fams.find(function(e) {
    return e.p1 === d.id || e.p2 === d.id
  });
  d.parentId = fam ? nodes.find(function(e) {
    return e.fam === fam.id;
  }).id : null;
});

之后，使用d3.stratify() 创建层次结构将非常简单：

const stratify = d3.stratify()(nodes);

这里是演示（使用浏览器的控制台检查结果，而不是 S.O. sn-p 控制台）：

let nodes = [{
    id: 'N001',
    fam: 'F001'
  },
  {
    id: 'N002',
    fam: 'F002'
  },
  {
    id: 'N003',
    fam: 'F003'
  },
  {
    id: 'N004',
    fam: 'F004'
  },
  {
    id: 'N005',
    fam: 'F005'
  },
  {
    id: 'N006',
    fam: 'F006'
  },
  {
    id: 'N007',
    fam: 'F007'
  },
  {
    id: 'N008',
    fam: 'F008'
  },
  {
    id: 'N009',
    fam: 'F009'
  },
  {
    id: 'N010',
    fam: 'F010'
  },
  {
    id: 'N011',
    fam: 'F011'
  }
];

let fams = [{
    id: 'F001',
    p1: 'N002',
    p2: 'N003'
  },
  {
    id: 'F002',
    p1: 'N004',
    p2: 'N005'
  },
  {
    id: 'F003',
    p1: 'N006',
    p2: 'N007'
  },
  {
    id: 'F004',
    p1: 'N008',
    p2: 'N009'
  },
  {
    id: 'F005',
    p1: 'N010',
    p2: 'N011'
  }
];

nodes.forEach(function(d) {
  const fam = fams.find(function(e) {
    return e.p1 === d.id || e.p2 === d.id
  });
  d.parentId = fam ? nodes.find(function(e) {
    return e.fam === fam.id;
  }).id : null;
});

const stratify = d3.stratify()(nodes);

console.log(stratify)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：