如何解决反应流程图:自动版式
有一些可用的选项可以使用react流程图创建自动布局。
(已使用npm package react-flow-chart
创建了图表)
我尝试了以下2种方法:
- npm软件包
react-flow-chart
提供了smartRouting
的配置选项 - 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') => {
...
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。