大家好，很高興又見面了，我是"進階前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支援是我不斷創作的動力。
今天給大家帶來的主題是 Reagraph，即 React 的 WebGL 圖形可視化庫。話不多說，直接進入正題！
什麼是 Reagraph
Reagraph 是一個在 WebGL 中為 React 建構的高性能網絡可視化（network graph visualization）圖庫，建構在 D3 和 Three.js 之上。
Reagraph 具有以下明顯特征：
- 基于 WebGL 的高性能
- 基于屬性、頁面排名、中心性、自定義的節點大小調整
- 具有自定義主題功能的淺色和深色模式
- 節點之間的路徑查找
- 徑向上下文菜單
- 突出顯示和選擇 Hook
- 拖動節點、套索選擇、展開/折疊節點、可定制的節點、進階标簽放置、邊緣插值、聚類等諸多特性
同時，Reagraph 具有以下内置布局：
- 力導向二維
- 力導向 3D
- 圓形二維
- 樹自上而下 2D、樹 左 右 2D、樹自上而下 3D、樹左右 3D
- 徑向輸出 2D、徑向輸出 3D
- 分層自頂向下 2D、分層左右二維
- 無重疊 2D、Force Atlas 2 2D
下面是力導向二維的圖示：
這是使用 d3-force-3d 的标準力導向布局，是 d3 力導向庫的修改版本，添加了對三維布局的支援。這是最常用的布局之一，因為該布局可以支援簡單性和靈活性。
下面是力導向 3D 的圖示：
力導向 3D 布局與 2D 版本類似，隻是增加了另一個次元。 它使用與 2D 版本相同的庫 ( d3-force-3d )。 3D 版本對于許多節點會互相重疊的非常大的圖形很有用。
關于更多的布局可以參考文末的資料，比如：Circular 2d、Tree 2D、Tree 3D、Radial 2D、Radial 3D、Hierarchical 2D、No Overlap、Force Atlas 2 等等。
值得注意的是，Reagraph 開源時間還比較短，比：D3js、ChartJS、Three.js、ECharts、highcharts、Recharts、Raphael、Victory、MetricsGraphics、C3js 等一衆可視化庫相比還處于早期階段。
如何使用 Reagraph
Reagraph 與 React v16+ 相容并可與 ReactDOM 配合使用，但是目前不支援 React Native。
首先需要通過 NPM 安裝：
npm i reagraph --save
// npm
yarn add reagraph
//yarn 接下來通過定義一些 nodes 和 edges 來建構第一個圖。 節點是塊，邊是塊之間的關系。
資料形狀需要 id 的一個屬性，但開發者可以将 label 或 icon 傳遞給它們以顯示其代表的某種訓示。
import React from "react";
import { GraphCanvas } from "reagraph";
const nodes = [
{
id: "1",
label: "1",
},
{
id: "2",
label: "2",
},
];
const edges = [
{
source: "1",
target: "2",
id: "1-2",
label: "1-2",
},
{
source: "2",
target: "1",
id: "2-1",
label: "2-1",
},
];
export const MyDiagram = () => <GraphCanvas nodes={nodes} edges={edges} />; 上面的形狀将建立兩個元素 1 和 2 并在它們之間建立關系。 一旦完成定義，開發者就可以簡單地将這些屬性傳遞給 Canvas，由 Canvas 自行完成渲染。
本文總結
本文主要和大家介紹 Reagraph，即 React 的 WebGL 圖形可視化庫。相信通過本文的閱讀，大家對 Reagraph 會有一個初步的了解。
因為篇幅有限，文章并沒有過多展開，如果有興趣，可以在我的首頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最後，歡迎大家點贊、評論、轉發、收藏！
參考資料
https://github.com/reaviz/reagraph
https://reagraph.dev/?path=/docs/docs-getting-started-layouts--docs
https://reagraph.dev/?path=/story/demos-nodes--no-edges