javascript 反应流程图库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50985004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Flow Chart Library
提问by Novice
I need a flow chart library, that can help me to create a flow chart as shown below in React. Would really appreciate if a link for similar demo is added.
我需要一个流程图库，它可以帮助我在 React 中创建如下所示的流程图。如果添加类似演示的链接，将不胜感激。
回答by Anshul Sahni
You can use https://github.com/projectstorm/react-diagrams, here is the linkto its demo.
您可以使用https://github.com/projectstorm/react-diagrams，这是其演示的链接。
The view of the implementation looks very similar to the one you mentioned in the pic given. Also since it says it's customizable, you can make it look like according to your requirements
实现的视图看起来与您在给出的图片中提到的非常相似。另外因为它说它是可定制的，你可以根据你的要求让它看起来像
回答by Sebastian
There aren't many flow and diagram libraries out there that have been specifically built for React. You should also be looking for generic solutionsthat integrate well with React.
没有很多专门为 React 构建的流和图表库。您还应该寻找与 React 很好地集成的通用解决方案。
If this is in a commercial context and/or your requirements are non-trivial, be sure to check out yFiles for HTML, which should be able to help you achieve all of the requirements I can see in your sample diagram:
如果这是在商业环境中和/或您的要求非常重要，请务必查看yFiles for HTML，它应该能够帮助您实现我在示例图中可以看到的所有要求：
- You can customize the design and look of your visualization to match exactly your requirements
- You can use automatic layout algorithms to dynamically arrange the items according to the structure of the data, without having the user to place items manually
- You can add as many labels, ports (connectors at nodes), to nodes and edges.
- You may customize the interactions, e.g. to disallow the creation of invalid structures in your diagram type
- It is a white-label solution that can be embedded into any JavaScript application.
- 您可以自定义可视化的设计和外观，以完全符合您的要求
- 您可以使用自动布局算法根据数据的结构动态排列项目，而无需用户手动放置项目
- 您可以向节点和边添加任意数量的标签、端口（节点处的连接器）。
- 您可以自定义交互，例如禁止在您的图表类型中创建无效结构
- 它是一种白标解决方案，可以嵌入到任何 JavaScript 应用程序中。
The library helps you create a react diagramming componentand also comes with a React Diagram Integration Demo. This allows you to use all the featuresin a React powered application. See this full diagram editor appfor a complex demo that shows many of the features of the library.
该库可帮助您创建反应图表组件，并附带一个反应图表集成演示。这允许您使用React 驱动的应用程序中的所有功能。请参阅此完整的图表编辑器应用程序以获取复杂的演示，其中显示了该库的许多功能。
Disclaimer: I work for the company that creates the library above. I do not represent my employer on SO, though. Answers, questions, and opinions are my own.
免责声明：我为创建上述库的公司工作。不过，我在 SO 上不代表我的雇主。答案、问题和意见都是我自己的。
回答by user3089664
Syncfusion have support to create a diagram with custom shapes , Label and Port to Port Connection in React. Please find the online samples of Syncfusion Diagram. We have created flow diagram which is similar to the provided screenshot.
Syncfusion 支持在 React 中创建带有自定义形状、标签和端口到端口连接的图表。请查找 Syncfusion Diagram 的在线示例。我们创建了类似于提供的屏幕截图的流程图。
Please refer to the sample from the below link:
请参考以下链接中的示例：
Sample link: https://codesandbox.io/s/wkvjjopv18
示例链接：https: //codesandbox.io/s/wkvjjopv18
You can also create a label for the node or connector by using annotation property. Please find the below link for how to add label to the node or connector
您还可以使用注释属性为节点或连接器创建标签。请找到以下链接，了解如何向节点或连接器添加标签
Link: https://ej2.syncfusion.com/react/documentation/diagram/labels#create-annotation
链接：https: //ej2.syncfusion.com/react/documentation/diagram/labels#create-annotation
