React-digraph 是为 React 设计的开源图形布局与绘图工具。它允许您通过可定义的节点和边缘来构建交互式的图形界面。使用 react-digraph，您可以让用户直接从 UI 中的节点和边缘中操作数据、链接和构建图形。
本文将详细介绍如何使用 react-digraph1 这一 npm 包，并提供实用的示例代码，帮助读者更好地学习和使用这个工具。
前置知识要求
在使用 react-digraph1 之前，你需要掌握以下技能：
- 基本的 JavaScript 语言知识
- React 框架的基础知识
- npm 包管理工具的使用方法
如果你不熟悉上面任何一个技能，建议你先了解一下。
安装 react-digraph1
使用 npm 包管理工具安装即可：
npm install react-digraph1 --save
如果你使用 yarn，也可以使用下面的命令：
yarn add react-digraph1
构建基本界面
在开始构建界面之前，先让我们看一下 react-digraph1 的基本结构:
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -----------------
----- -------- - -----
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ ------------
--
-
-------- -
----- - ----- - - -----------
------ -
----------
------------------
-------------------
-------------------
-------------
--------------
--------------
---------------
--
--
-
-
------ ------- ------在上面的代码中，我们通过 GraphView 组件渲染出了整个图形界面，其中的graph参数是通过 props 传入的，它包含了节点和边缘的数据信息。
具体的说，我们传入的graph参数应该包含以下格式的内容:
-- -------------------- ---- -------
----- ----- - -
------ -
-
--- --
------ ----- ---
-- ------------------
-- ------------------
----- ----------
--
-
--- --
------ ----- ---
-- ------------------
-- ------------------
----- ----------
--
--
------ -
-
------- --
------- --
----- ----------
--
--
--接下来，我们需要根据上面的代码块构建一个基本的图形界面。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
----- ----- - -
------ -
-
--- --
------ ----- ---
-- ------------------
-- ------------------
----- ----------
--
-
--- --
------ ----- ---
-- ------------------
-- ------------------
----- ----------
--
--
------ -
-
------- --
------- --
----- ----------
--
--
--
----- --- ------- --------------- -
-------- -
------ -
---- ----------------
------ ------------- --
------
--
-
-
------ ------- ----在上面的代码中，我们创建了一个叫做 App 的 React 组件，并将 graph 作为 props 传递给 Graph 组件。在 componentDidMount 这个生命周期函数中，我们需要根据服务器端返回的数据更新 graph 的信息。
更新图形界面
接下来，我们来看看如何在 react-digraph1 中更新节点和边缘的信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ---------- --------- - ---- -----------------
------ - -------- - ---- ------------------------
------ - ----- ----- ------ - ---- ---------------------
----- ------------ - -
-------- -----
------ ----------
-------- ----------
-------- ----------
--
--------- ----------- -
------ -------
-------------- -- -- -----
-
----- ----- ------- ---------------------------- - ------ ------ -- -
------------------ ------------ -
-------------
----- - ----- - - ------
---------- - - ----- --
-
----------------------------- ------------ -
----- - ------ -------- - - ----------
----- - ------ -------- - - -----------
-- --------- --- --------- -
--------------- ------ -------- ---
-
-
-------------- -
------ -
-------- -
-------- -----------
------ -
------- ---------- - --- ---- -------------
------- ------- ------- ------ --
---------
--
--
--
-
-------------- -
------ -
-------- -
-- -------- -- ---- ----- ----
-------- -----------
------ -
------- ---------- - -- --- -------------
------- ------- ------- ----- --------------------
--------
-----------------
----------
----------
---------------
-----------------
------------------------
--
---------
---------
--
--
--
-
------------ - ---------- ---- - ----- -- ---
------------ - -- -- ---
------------ - -- -- ---
------------ - -- -- ---
------------ - ---------- ---- - ----- -- ---
------------ - -- -- ---
------------ - -- -- ---
------------ - -- -- ---
-------- -
----- - ----- - - -----------
----- - ------------- - - -----------
------ -
---- -----------------------
----------
------------------
-------------------
-------------------
-------------
-------------------------------
-------------------------------
---------------------
-----------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--
------- ------------------------ ------------------------
--- ----
---------
------
--
-
-
------ ------- ------在上面的代码中，我们定义了一个 GraphReact 组件，并使用 GraphView 显示我们的图形。
此外，我们还定义了一系列回调函数，用于传递图形中发生的事件，如节点选中（onSelectNode）、节点创建（onCreateNode）、节点更新（onUpdateNode）等。这些事件对于我们在构建交互式的图形界面时非常关键。
示例代码
下面是一个完整的示例代码，其中我们创建了一个基本的 GraphReact 组件，并实现了添加节点的逻辑。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ---------- --------- - ---- -----------------
------ - -------- - ---- ------------------------
------ - ----- ----- ------ - ---- ---------------------
----- ------------ - -
-------- -----
------ ----------
-------- ----------
-------- ----------
--
--------- ----------- -
------ -------
-------------- -- -- -----
-
----- ----- ------- ---------------------------- - ------ ------ -- -
------------------ ------------ -
-------------
----- - ----- - - ------
---------- - - ----- --
-
----------------------------- ------------ -
----- - ------ -------- - - ----------
----- - ------ -------- - - -----------
-- --------- --- --------- -
--------------- ------ -------- ---
-
-
-------------- -
------ -
-------- -
-------- -----------
------ -
------- ---------- - --- ---- -------------
------- ------- ------- ------ --
---------
--
--
--
-
-------------- -
------ -
-------- -
-- -------- -- ---- ----- ----
-------- -----------
------ -
------- ---------- - -- --- -------------
------- ------- ------- ----- --------------------
--------
-----------------
----------
----------
---------------
-----------------
------------------------
--
---------
---------
--
--
--
-
------------ - ---------- ---- - ----- -- ---
------------ - -- -- -
----- - ----- - - -----------
----- -------- - - --- ------------------- - -------------- ------ ------- ----- --------- --
---------------
------ -
---------
------ ---------------- ----------
--
---
--
------------ - -- -- ---
------------ - -- -- ---
------------ - ---------- ---- - ----- -- ---
------------ - -- -- ---
------------ - -- -- ---
------------ - -- -- ---
-------- -
----- - ----- - - -----------
----- - ------------- - - -----------
------ -
---- -----------------------
----------
------------------
-------------------
-------------------
-------------
-------------------------------
-------------------------------
---------------------
-----------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--------------------------------
--
------- ------------------------ ------------------------
--- ----
---------
------
--
-
-
------ ------- ------上面代码中，我们定义了一个 GraphReact 组件，并通过 GraphView 显示我们的图表。此外，我们还定义了一系列回调函数，用于处理图表中发生的事件。
我们在创建节点时，会先根据当前的 graph 对象，生成一个新的节点对象 nextNode，并更新 graph 中的节点列表。最后，我们更新 state 中的 graph 对象。
通过调用this.setState({ graph: { ...graph, nodes: [...graph.nodes, nextNode] } });，我们成功将新的节点添加到了我们的图表中。
总结
在本文中，我们详细地介绍了如何使用 npm 包 react-digraph1 来构建图形化交互界面。我们提供了详细的代码示例，包括如何定义节点和边缘的数据格式、如何构建基本的 UI 界面以及如何在 UI 界面中添加节点等。
react-digraph1 的使用能够帮助我们更好的构建基于图表的交互界面，增强用户的操作交互能力。希望读者能够根据本文的指引，掌握 react-digraph1 的使用方法，更好的应用它到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66aaa