反应流程图：自动版式

问题描述

有一些可用的选项可以使用react流程图创建自动布局。 （已使用npm package react-flow-chart创建了图表）

我尝试了以下2种方法：

1. npm软件包react-flow-chart提供了smartRouting的配置选项
2. npm软件包dagre，

当我将它们用于具有相同高度的节点时，这两个选项均能正常工作。 在我的图表中，我的节点可能具有不同的宽度和不同的高度。

如何确保自动布局不会与节点重叠？

谢谢。

解决方法

我想将此作为评论但没有权限，因此需要将其作为答案。

在 layouting example on the site 中，它有一个代码片段，其中包含有关如何执行此操作的注释：

const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));

// In order to keep this example simple the node width and height are hardcoded.
// In a real world app you would use the correct width and height values of
// const nodes = useStoreState(state => state.nodes) and then node.__rf.width,node.__rf.height

const nodeWidth = 172;
const nodeHeight = 36;

const getLayoutedElements = (elements,direction = 'TB') => {
  ...
};