【ReactJS】使用GoJS实现自己的图表App
@TOC
推荐超级课程：
1：用于绘制自定义图表的JavaScript库：
用于绘制UML（或BPMN或ERD …）图表的JavaScript库：
- . JointJS
- . Rappid
- . MxGraph
- . GoJS
- . jsUML2库
- . Mindfusion Diagram库
- . Nomnoml
- . Mermaid.js
- . Diagram.js
- . State.js
在本帖中，我将介绍GoJS。😉
2：为什么选择GoJS？
GoJS是一个功能丰富的JavaScript库，用于在现代浏览器和平台上实现交互式图表。
GoJS通过可定制的模板和布局使构建复杂节点、链接和组的图表变得简单。
GoJS提供许多高级功能，用于用户交互，如拖放、复制粘贴、事务状态和撤销管理、色板、概览、数据绑定模型、事件处理程序，
以及用于自定义操作的可扩展工具系统。
他们提供了150多个交互示例
来帮助您开始使用BPMN、流程图、状态图、可视化树、Sankey和数据流等图表。
API文档非常完善，确保您可以立即开始使用它。
3：让我们使用现有的React应用程序：
步骤1：
安装：
首先安装GoJS和gojs-react：
npm install gojs gojs-react
导入：
import * as go from ‘gojs’;
import { ReactDiagram } from ‘gojs-react’;
步骤2：
添加一个initDiagram函数：
该函数处理对GoJS模型的任何更改。
‘undoManager.isEnabled’: true：// 必须设置以允许对模型更改进行监听
linkKeyProperty: ‘key’：// 重要！在使用GraphLinksModel时，必须定义以进行合并和数据同步
diagram.nodeTemplate：// 定义一个简单的节点模板
{ name: ‘SHAPE’, fill: ‘white’, strokeWidth: 0 }：// Shape.fill绑定到Node.data.color
{ margin: 8, editable: true }：// 文本周围留出一些空间
步骤3：
在render方法中添加ReactDiagram组件：
<ReactDiagram
initDiagram={initDiagram}
divClassName='diagram-component'
nodeDataArray={[
{ key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' },
{ key: 1, text: 'Beta', color: 'orange', loc: '150 0' },
{ key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' },
{ key: 3, text: 'Delta', color: 'pink', loc: '150 150' }
]}
linkDataArray={[
{ key: -1, from: 0, to: 1 },
{ key: -2, from: 0, to: 2 },
{ key: -3, from: 1, to: 1 },
{ key: -4, from: 2, to: 3 },
{ key: -5, from: 3, to: 0 }
]}
onModelChange={handleModelChange}
/>
创建图表数据：
• 创建nodeDataArray：每个对象代表图表中的节点，包含特征（文本、颜色、窗口上的位置等）
• linkDataArray：每个对象代表两个节点之间的关系
示例：（源：“节点编号1” 到：“节点编号3”）
步骤4：
添加一个模型更改处理程序函数，
该函数处理对GoJS模型的任何更改。
在这里，您将对React状态进行任何更新，下面将对此进行讨论。
function handleModelChange(changes) {
console.log('changes', changes);
}
在组件的第一次渲染中，更改值返回一个包含不同信息的数组，例如：
insertedLinkKeys：两个节点之间的关系键，
insertedNodeKeys：节点键，
modifiedLinkData：linkDataArray对象，
modifiedNodeData：nodeDataArray对象
• 如果我们修改节点的位置，“更改”会返回新的modifiedNodeData数组，其中包含修改后节点的“loc”属性的新值
• 如果我们修改关系，“更改”会返回新的modifiedLinkData数组，其中包含“from”和“to”属性的新值
本文探讨的内容代码可以参考：在线示例代码