在前端开发过程中，我们通常需要对图进行操作和可视化。Ngraph 是一个用于构建图的 JavaScript 库，它的 ngraph.subgraph 包提供了一个简单易用的 API，用于在一个大型图中提取子图，以便更好地可视化和分析。
安装
使用 npm 安装 ngraph.subgraph：
npm install ngraph.subgraph
使用
创建全局 Graph
首先需要创建一个全局的 Graph 对象，在 Node.js 环境下可以使用以下代码创建：
const createGraph = require('ngraph.graph');
const globalGraph = createGraph();但是在浏览器环境下，需要将 ngraph.js 引入页面中，来创建一个全局的 Graph 对象。
<script src="https://unpkg.com/ngraph.graph@2.0.3/dist/ngraph.js"></script> <script> const globalGraph = createGraph(); </script>
添加节点到全局 Graph
接下来需要将节点添加到全局的 Graph 对象中。使用以下代码创建一个节点：
const node = globalGraph.addNode('nodeId', { x: 0, y: 0 });其中，'nodeId' 是节点的唯一标识符，{ x: 0, y: 0 } 是节点的坐标位置。
添加边到全局 Graph
使用以下代码创建一条边：
const edge = globalGraph.addLink('sourceNodeId', 'targetNodeId');其中，'sourceNodeId' 是边的源节点，'targetNodeId' 是边的目标节点。该函数将返回一个边对象。
提取子图
使用以下代码可以提取子图：
const subgraph = require('ngraph.subgraph')(globalGraph);
const subgraphNodes = subgraph.getNodes(); // 提取的子图节点集合
const subgraphEdges = subgraph.getLinks(); // 提取的子图边集合示例
以下示例展示了如何使用 ngraph.subgraph 提取从源节点 'nodeId1' 出发的子图：
-- -------------------- ---- ------- ----- ----------- - ------------------------ ----- -------------- - --------------------------- -- ---- ----- -- ----- ----------- - -------------- -- ---- ------------------------------ - -- -- -- - --- ------------------------------ - -- ---- -- - --- ------------------------------ - -- ---- -- - --- -- --- ------------------------------ ----------- ------------------------------ ----------- -- ---- ----- -------- - ---------------------------- ----- ------------- - -------------------- ----- ------------- - -------------------- --------------------------- -- - ---------- ---------- --------- - --------------------------- -- - - --- ------------------ -- - --- ------------------ - -
学习意义
ngraph.subgraph 可以帮助我们在复杂的图形结构中提取有效的子图。它的使用简单明了，可以为我们在图形可视化和分析中提供很大帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e20520b171f02e1d52