以正确的顺序对图表的节点进行排序

Question

我正在处理一个图表，但我很难以正确的顺序正确排序/渲染图表节点。

对于逻辑，我在 Angular 应用程序中使用 Typescript。

我有一个带有链接的数组，其中为每个数据集指定了源节点和目标节点。

linksArray = [{source: 'NodeId1', target: 'NodeId3'}, {source: 'NodeId1', target: 'NodeId6'}, {source: 'NodeId6', target: 'NodeId2'}, {source: 'NodeId8', target: 'NodeId10'}...]

现在我想迭代这个数组并以正确的顺序为每个条目调用“graph.add(node)”。

算法是这样的：

1. 获取第一个源节点和目标节点，并将它们直接添加到图中（第一个条目（linksArray[0]）是始终第一个节点。我可以确定这一点。）。
2. 检查数组，看看目标节点是否再次作为源节点出现。接下来添加前一个源的目标节点 - REPEAT等
3. 目标是以正确的节点顺序渲染图形并且彼此相邻。

否则，有些节点会相距较远。那将不可读。

也许我的想法是错误的，其实更简单。

提前致谢。

Answer 1

我自己解决了。

NodesArray 以正确的渲染顺序包含各个节点。

  let nodesArray: any[] = [];

  let nodeLinks = [{source: 'NodeId1', target: 'NodeId3'}, {source: 'NodeId1', target: 'NodeId6'}, {source: 'NodeId6', target: 'NodeId2'}, {source: 'NodeId8', target: 'NodeId10'}];

  let tempTargetNode: string;
 
  // Sort Nodes

  nodeLinks.forEach((firstLevelLink: { source: any; target: any }, index: number) => {

    if (index === 0) {

      nodesArray.push({ id: firstLevelLink.source, name: firstLevelLink.source });

      nodesArray.push({ id: firstLevelLink.target, name: firstLevelLink.target });

      tempTargetNode = firstLevelLink.target;

    } else {

      nodeLinks.forEach((secondLevelNodeLink: { source: any; target: any }, index: number) => {

        if (tempTargetNode === secondLevelNodeLink.source) {

          nodesArray.push({ id: secondLevelNodeLink.target, name: secondLevelNodeLink.target });

          tempTargetNode = secondLevelNodeLink.target;

        }

      });

    }

  });