如何以节点+边的格式为ECharts树图提供数据？

在ECharts中可视化树结构可以用树图组件，它接受嵌套格式的JSON数据——子节点要放在父节点的children属性里，支持无限层级。但我想改用ECharts关系图要求的「节点+边对象」格式来提供数据，请问直接这么用可行吗？还是必须自己写JS函数做格式转换？

不行，ECharts的树图组件不直接支持关系图的「节点+边」数据格式，你必须编写自定义JavaScript函数完成格式转换。

具体转换思路如下：

• 先将所有节点以ID为键存入映射对象，方便快速查找节点
• 遍历所有边数据，找到对应父节点，将子节点添加到父节点的children数组中
• 最后筛选出没有父节点的根节点，作为树结构的入口

以下是一个简单的转换函数示例：

function convertGraphToTree(nodes, links) {
  const nodeMap = new Map();
  // 初始化节点映射表，给每个节点添加children数组
  nodes.forEach(node => {
    nodeMap.set(node.id, { ...node, children: [] });
  });
  // 根据边关系构建嵌套结构
  links.forEach(link => {
    const parentNode = nodeMap.get(link.source);
    const childNode = nodeMap.get(link.target);
    if (parentNode && childNode) {
      parentNode.children.push(childNode);
    }
  });
  // 筛选根节点（没有被任何边指向的节点）
  const rootIds = new Set(nodes.map(n => n.id));
  links.forEach(link => rootIds.delete(link.target));
  const rootNode = nodeMap.get([...rootIds][0]);
  return rootNode;
}

如果你的树结构存在多个根节点，也可以调整函数返回根节点数组，适配树图的data配置项。

内容的提问来源于stack exchange，提问作者Podbrushkin