React-force-graph

用于 force-graph 组件系列的 React 绑定：force-graph（2D HTML 画布）、3d-force-graph（ThreeJS/WebGL）、3d-force-graph-vr（A-Frame）以及 3d-force-graph-ar（AR.js）。

此模块导出四个接口完全相同的 React 组件：ForceGraph2D、ForceGraph3D、ForceGraphVR 和 ForceGraphAR。每个组件都可以使用力导向迭代布局在二维或三维空间中表示图数据结构。

为了方便依赖关系，所有组件也作为独立包提供：react-force-graph-2d、react-force-graph-3d、react-force-graph-vr 和 react-force-graph-ar。

使用 canvas/WebGL 进行渲染，并使用 d3-force-3d 作为底层物理引擎。 支持缩放/平移、节点拖动以及节点/链接的悬停/点击交互。

另请参见 react-three-fiber 组件。

示例

• 基础 （源码）
• 带方向箭头的链接 （源码）
• 带方向移动粒子的链接 （源码）
• 自动着色的节点/链接 （源码）
• AR 图 （源码）
• 2D 文本节点 （源码）
• 3D 文本节点 （源码）
• 图像节点 （源码）
• 节点中的 HTML （源码）
• 自定义 2D 节点形状 （源码）
• 自定义 3D/VR 节点几何形状 （源码）
• 曲线链接和自链接 （源码）
• 链接中的文本 （源码）
• 高亮节点/链接 （源码）
• 更大的图 （源码）
• 动态数据变化 （源码）
• 点击聚焦节点 （源码）
• 点击展开/折叠节点 （源码）
• 拖动后固定节点 （源码）
• 适应画布的图 （源码）
• 相机自动旋转 （源码）
• 节点碰撞检测 （源码）
• 按需发射链接粒子 （源码）
• 力导向树（DAG 模式） （源码）
• 辉光后处理效果 （源码）

快速入门

import ForceGraph2D from 'react-force-graph-2d';
import ForceGraph3D from 'react-force-graph-3d';
import ForceGraphVR from 'react-force-graph-vr';
import ForceGraphAR from 'react-force-graph-ar';

或者

import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph';

或者通过使用 <script> 标签。

<script src="//unpkg.com/react-force-graph-2d"></script>
<script src="//unpkg.com/react-force-graph-3d"></script>
<script src="//unpkg.com/react-force-graph-vr"></script>
<script src="//unpkg.com/react-force-graph-ar"></script>

然后

<ForceGraph3D
  graphData={myData}
/>

API参考

请注意，下面列出的并非所有属性都适用于全部4个组件。表格中最后四列指明了每个属性/方法适用于特定组件的情况。

数据输入

属性	类型	默认值	描述	2D	3D	VR	AR
graphData	对象	{ nodes: [], links: [] }	图数据结构（具体语法见下文）。也可以用于应用增量更新。	✔️	✔️	✔️	✔️
nodeId	字符串	id	节点对象访问器属性，用于唯一节点ID（在链接对象源/目标中使用）。	✔️	✔️	✔️	✔️
linkSource	字符串	source	链接对象访问器属性，引用源节点的ID。	✔️	✔️	✔️	✔️
linkTarget	字符串	target	链接对象访问器属性，引用目标节点的ID。	✔️	✔️	✔️	✔️

容器布局

属性	类型	默认值	描述	2D	3D	VR	AR
width	数字	<窗口宽度>	画布宽度，单位像素。	✔️	✔️	✔️	✔️
height	数字	<窗口高度>	画布高度，单位像素。	✔️	✔️	✔️	✔️
backgroundColor	字符串	（2D - 浅色 / 3D - 深色）	图表背景颜色。	✔️	✔️	✔️
showNavInfo	布尔值	true	是否显示导航控制底部信息。		✔️	✔️
yOffset	数字	1.5	在AR模式下，定义放置力导向图的中心坐标 <0,0,0> 在标记上方的偏移距离。以标记宽度单位衡量。				✔️
glScale	数字	200	在AR模式下，定义现实世界距离与WebGL单位之间的平移比例，确定图的总体大小。以一个完整标记宽度内包含多少GL单位来定义。				✔️
markerAttrs	对象	{ preset: 'hiro' }	一组属性，定义AR力导向图挂载的标记，遵循 a-marker规范。此属性仅在组件挂载时有效。				✔️

节点样式

属性	类型	默认值	描述	2D	3D	VR	AR
nodeRelSize	数字	4	节点圆面积（平方像素）[2D]或球体积（立方像素）[3D]与值单位的比例。	✔️	✔️	✔️	✔️
nodeVal	数字、字符串或函数	val	节点对象访问器函数、属性或数值常量，用于节点的数值（影响节点大小）。	✔️	✔️	✔️	✔️
nodeLabel	字符串或函数	name	节点对象访问器函数或属性，用于名称（在标签中显示）。支持纯文本或HTML内容（VR除外）。	✔️	✔️	✔️
nodeDesc	字符串或函数	desc	仅限于VR。节点对象访问器函数或属性，用于描述（在标签下方显示）。			✔️
nodeVisibility	布尔值、字符串或函数	true	节点对象访问器函数、属性或布尔常量，用于确定是否显示节点。	✔️	✔️	✔️	✔️
nodeColor	字符串或函数	color	节点对象访问器函数或属性，用于节点颜色。	✔️	✔️	✔️	✔️
nodeAutoColorBy	字符串或函数		节点对象访问器函数或属性，用于自动按组分配颜色。仅影响没有颜色属性的节点。	✔️	✔️	✔️	✔️
nodeOpacity	数字	0.75	节点球体不透明度，范围在[0,1]之间。		✔️	✔️	✔️
nodeResolution	数字	8	每个节点的球体几何分辨率，表示圆周分割的片段数量。值越高，球体越平滑。仅适用于3D模式。		✔️	✔️	✔️
nodeCanvasObject	函数	默认2D节点对象是圆形，大小根据val决定，样式根据color决定。	回调函数，用于绘制代表图节点的自定义2D画布对象。应使用提供的画布上下文属性执行每个节点的绘制操作。回调函数在每帧对每个节点调用，签名如下：nodeCanvasObject(<节点>, <画布上下文>, <当前全局缩放>)。	✔️
nodeCanvasObjectMode	字符串或函数	() => 'replace'	节点对象访问器函数或属性，用于自定义绘制模式。与nodeCanvasObject结合使用，指定如何自定义节点绘制。可能的值包括： replace：节点仅使用nodeCanvasObject渲染。 before：先调用nodeCanvasObject，然后执行默认节点绘制。 after：nodeCanvasObject在默认节点绘制之后应用。 任何其他值都将被忽略，并应用默认绘制。	✔️
nodeThreeObject	Object3d、字符串或函数	默认3D节点对象是球体，大小根据val决定，样式根据color决定。	节点对象访问器函数或属性，用于生成作为图节点渲染的自定义3D对象。应返回ThreeJS Object3d的实例。如果返回假值，则该节点将使用默认的3D对象类型。		✔️	✔️	✔️
nodeThreeObjectExtend	布尔值、字符串或函数	false	节点对象访问器函数、属性或布尔值，用于在使用自定义nodeThreeObject时是否替换默认节点（false）或扩展它（true）。		✔️	✔️	✔️

链接样式

属性	类型	默认值	描述	2D	3D	VR	AR
linkLabel	字符串 或 函数	name	链接对象访问器函数或名称属性（在标签中显示）。支持纯文本或HTML内容（VR除外）。	✔️	✔️	✔️
linkDesc	字符串 或 函数	desc	仅限VR。链接对象访问器函数或描述属性（在标签下方显示）。			✔️
linkVisibility	布尔值、字符串 或 函数	true	链接对象访问器函数、属性或布尔常量，用于确定是否显示链接线。	✔️	✔️	✔️	✔️
linkColor	字符串 或 函数	color	链接对象访问器函数或属性，用于设置线颜色。	✔️	✔️	✔️	✔️
linkAutoColorBy	字符串 或 函数		链接对象访问器函数或属性，用于自动按组颜色分组。仅影响没有颜色属性的链接。	✔️	✔️	✔️	✔️
linkOpacity	数字	0.2	链接的线透明度，范围在 [0,1] 之间。		✔️	✔️	✔️
linkLineDash	数字数组、字符串 或 函数		链接对象访问器函数、属性或数字数组（例如 [5, 15]），用于确定是否应对此渲染链接应用线划线。请参考 HTML canvas setLineDash API 以获取示例值。任何假值或空数组都将禁用虚线。	✔️
linkWidth	数字、字符串 或 函数	1	链接对象访问器函数、属性或数值常量，用于设置链接线宽度。	✔️	✔️	✔️	✔️
linkResolution	数字	6	每个3D链接线的几何分辨率，表示为将圆柱体分为多少个径向段。值越高，圆柱体越平滑。仅适用于宽度为正的链接。		✔️	✔️	✔️
linkCurvature	数字、字符串 或 函数	0	链接对象访问器函数、属性或数值常量，用于设置链接线的曲率半径。值为 0 时绘制直线。1 表示半径等于线长度的一半，使曲线近似为半圆。对于自引用链接（source 等于 target），曲线表示为围绕节点的循环，长度与曲率值成比例。	✔️	✔️	✔️	✔️
linkCurveRotation	数字、字符串 或 函数	0	链接对象访问器函数、属性或数值常量，用于沿着线轴应用曲线旋转。对直线无效果。旋转 0 度时，曲线朝向与 XY 平面相交的方向。旋转角度（以弧度为单位）将围绕“起点至终点”轴从参考方向顺时针旋转曲线。		✔️	✔️	✔️
linkMaterial	材质、字符串 或 函数	默认链接材质为 MeshLambertMaterial，根据 color 和 opacity 进行样式设置。	链接对象访问器函数或属性，用于指定自定义材质以设置图形链接的样式。应返回 ThreeJS Material 的实例。如果返回 假值，则对该链接使用默认材质。		✔️	✔️	✔️
linkCanvasObject	函数	默认2D链接对象是一条线，根据 width 和 color 进行样式设置。	用于绘制表示图形链接的定制画布对象的回调函数。应使用提供的画布上下文属性进行绘制操作。回调函数将在每帧为每个链接调用，并具有以下签名：.linkCanvasObject(<link>, <canvas context>, <current global scale>)。	✔️
linkCanvasObjectMode	字符串 或 函数	() => 'replace'	链接对象访问器函数或属性，用于自定义绘制模式。与 linkCanvasObject 结合使用，指定如何自定义链接绘制。可能的值有： replace：仅使用 linkCanvasObject 渲染链接。 before：通过调用 linkCanvasObject 然后继续默认链接绘制来渲染链接。 after：在默认链接绘制完成后应用 linkCanvasObject。 任何其他值都将被忽略，应用默认绘制。	✔️
linkThreeObject	Object3d、字符串 或 函数	默认3D链接对象是一条线或圆柱体，根据 width 和 material 进行尺寸和样式设置。	链接对象访问器函数或属性，用于生成自定义3D对象以渲染为图形链接。应返回 ThreeJS Object3D 的实例。如果返回 假值，则对该链接使用默认3D对象类型。		✔️	✔️	✔️
linkThreeObjectExtend	布尔值、字符串 或 函数	false	链接对象访问器函数、属性或布尔值，用于确定在使用自定义 linkThreeObject 时替换默认链接（false）还是扩展它（true）。		✔️	✔️	✔️
linkPositionUpdate	func(linkObject, { start, end }, link)		在每次渲染迭代中调用以更新链接位置的自定义函数。它接收相应的链接 ThreeJS Object3d、链接的 start 和 end 坐标（每个 {x,y,z}），以及链接的 data。如果函数返回真值，则该链接的常规位置更新函数不会运行。		✔️	✔️	✔️
linkDirectionalArrowLength	数字、字符串 或 函数	0	链接对象访问器函数、属性或数值常量，用于设置指示链接方向性的箭头头的长度。箭头直接显示在链接线上方，并指向 source > target 的方向。值为 0 隐藏箭头。	✔️	✔️	✔️	✔️
linkDirectionalArrowColor	字符串 或 函数	color	链接对象访问器函数或属性，用于设置箭头头的颜色。	✔️	✔️	✔️	✔️
linkDirectionalArrowRelPos	数字、字符串 或 函数	0.5	链接对象访问器函数、属性或数值常量，用于设置箭头头沿链接线的纵向位置，表示为 0 和 1 之间的比例，其中 0 表示紧邻 source 节点，1 表示紧邻 target 节点，0.5 表示正中间。	✔️	✔️	✔️	✔️
linkDirectionalArrowResolution	数字	8	箭头头的几何分辨率，表示为将圆锥底圆周分为多少个切片段。值越高，箭头越平滑。		✔️	✔️	✔️
linkDirectionalParticles	数字、字符串 或 函数	0	链接对象访问器函数、属性或数值常量，用于设置在链接线上显示的粒子（小球）数量。粒子沿线等距分布，沿 source > target 方向移动，并可用于指示链接方向性。	✔️	✔️	✔️	✔️
linkDirectionalParticleSpeed	数字、字符串 或 函数	0.01	链接对象访问器函数、属性或数值常量，用于设置方向性粒子的速度，表示为每帧链接长度要旅行的比例。建议值不要超过 0.5。	✔️	✔️	✔️	✔️
linkDirectionalParticleWidth	数字、字符串 或 函数	0.5	链接对象访问器函数、属性或数值常量，用于设置方向性粒子的宽度。值将四舍五入到最近的十分位用于索引。	✔️	✔️	✔️	✔️
linkDirectionalParticleColor	字符串 或 函数	color	链接对象访问器函数或属性，用于设置方向性粒子的颜色。	✔️	✔️	✔️	✔️
linkDirectionalParticleResolution	数字	4	每个3D方向性粒子的几何分辨率，表示为将圆周分为多少个切片段。值越高，粒子越平滑。		✔️	✔️	✔️

方法	参数	描述	2D	3D	VR	AR
emitParticle	(link)	生成粒子的另一种机制，此方法在特定链接内发射一个非循环的单个粒子。发射的粒子继承常规粒子属性的样式（速度、宽度、颜色）。应传递有效的 link 对象作为单一参数，该对象包含在 graphData 中。	✔️	✔️	✔️	✔️

渲染控制

属性	类型	默认值	描述	2D	3D	VR	AR
rendererConfig	对象	{ antialias: true, alpha: true }	传递给 ThreeJS WebGLRenderer 构造函数的配置参数。此属性仅在组件挂载时有效。		✔️
extraRenderers	数组	[]	如果您希望包含需要专用渲染器（如 CSS3DRenderer）的自定义对象，请在此数组中包含这些额外渲染器实例。		✔️
autoPauseRedraw	布尔值	true	启用性能优化，在模拟引擎暂停时自动暂停重绘 2D 画布。如果您有依赖画布连续重绘的自定义动态对象，建议关闭此选项。	✔️
minZoom	数字	0.01	2D 画布上允许的最小缩小级别。	✔️
maxZoom	数字	1000	2D 画布上允许的最大放大级别。	✔️
onRenderFramePre	函数	-	在每一帧渲染任何节点/链接之前调用的回调函数。这可以用来在画布上绘制额外的外部项目。画布上下文和当前全局缩放包括在参数中：.onRenderFramePre(<画布上下文>, <全局缩放>)。	✔️
onRenderFramePost	函数	-	在每一帧渲染最后一个节点/链接之后调用的回调函数。这可以用来在画布上绘制额外的外部项目。画布上下文和当前全局缩放包括在参数中：.onRenderFramePost(<画布上下文>, <全局缩放>)。	✔️

方法	参数	描述	2D	3D	VR	AR
pauseAnimation	-	暂停组件的渲染周期，有效冻结当前视图并取消所有用户交互。在静态图像足够的情况下，此方法可以用来节省性能。	✔️	✔️
resumeAnimation	-	恢复组件的渲染周期，并重新启用用户交互。此方法可以与 pauseAnimation 配合使用，以优化性能。	✔️	✔️
centerAt	([x], [y], [ms])	设置视口中心的坐标。此方法可以用来在 2D 画布上编程进行平移。x, y 坐标是可选的，允许仅在某一维上移动。第三个可选参数定义了动画画布移动的持续时间（以毫秒为单位）。	✔️
zoom	([数字], [ms])	设置 2D 画布的缩放数量。缩放是定义为每个像素的缩放变换。1 的值表示统一，较大的值放大，较小的值缩小。第二个可选参数定义了动画画布移动的持续时间（以毫秒为单位）。默认情况下，缩放设置为与系统中的节点数量成反比。	✔️
zoomToFit	([ms], [px], [nodeFilterFn])	自动缩放/平移画布，以便所有节点都适合在其中。如果没有找到节点，则不执行任何操作。它接受两个可选参数：第一个定义动画画布移动的持续时间（以毫秒为单位，默认：0ms）。第二个参数是画布边缘和最外层节点之间的填充（以像素为单位，默认：10px）。第三个参数指定一个自定义节点筛选器：node => <布尔值>，如果节点应被包括，则应返回一个真值。这对于关注图的某一部分非常有用。	✔️	✔️
cameraPosition	([{x,y,z}],[lookAt], [ms])	重新定位摄像机，以 x、y、z 坐标表示。每个坐标是可选的，允许在某些维度上移动。可选的第二参数可用于定义摄像机应瞄准的 3D 空间中的 {x,y,z} 点。第三个可选参数定义了动画摄像机移动的持续时间（以毫秒为单位）。默认值为 0（默认值）会立即将摄像机移动到最终位置。默认情况下，摄像机面向图的中心，z 距离与系统中的节点数量成比例。		✔️
lights	([数组])	场景中使用的光列表的获取器/设置器。每个项目应该是 Light 的实例。		✔️
scene	-	访问内部的 ThreeJS 场景。		✔️
camera	-	访问内部的 ThreeJS 摄像机。		✔️
renderer	-	访问内部的 ThreeJS WebGL 渲染器。		✔️
postProcessingComposer	-	访问 后处理合成器。使用此添加后处理 渲染效果 到场景。默认情况下，合成器有一个单一通道（RenderPass），直接渲染场景而不应用任何效果。		✔️
controls	-	访问内部的 ThreeJS 控制对象。		✔️
refresh	-	重新绘制所有节点/链接。		✔️	✔️	✔️

力引擎配置

属性	类型	默认值	描述	2D	3D	VR	AR
numDimensions	1, 2 或 3	3	不适用于2D模式。在力模拟上运行的维度数。		✔️	✔️	✔️
forceEngine	string	d3	使用哪种力模拟引擎（d3 或 ngraph）。		✔️	✔️	✔️
dagMode	string	-	根据图形方向性应用布局约束。仅适用于DAG图结构（无环）。选择 td（自顶向下）、bu（自底向上）、lr（从左到右）、rl（从右到左）、zout（由近至远）、zin（由远至近）、radialout（向外径向）或 radialin（向内径向）。	✔️	✔️	✔️	✔️
dagLevelDistance	number	根据节点数自动推导	如果启用了dagMode，这指定了不同图形深度之间的距离。	✔️	✔️	✔️	✔️
dagNodeFilter	func	node => true	节点访问器函数，用于指定在DAG布局处理期间要忽略的节点。此访问器方法接收一个节点对象，并应返回一个boolean值，指示是否包含该节点。排除的节点将保持不受约束，可以自由向任何方向移动。	✔️	✔️	✔️	✔️
onDagError	func	-	在处理DAG布局的数据结构时遇到循环时调用的回调。图形的循环段包含为信息，作为一个节点id数组。默认情况下，每次遇到循环都会抛出异常。您可以覆盖此方法以在外部处理此案例，并允许图形继续DAG处理。如果遇到循环，则不能保证严格的图形方向性，结果是尽力建立层次结构。	✔️	✔️	✔️	✔️
d3AlphaMin	number	0	设置simulation alpha min参数。仅在使用d3模拟引擎时适用。	✔️	✔️	✔️	✔️
d3AlphaDecay	number	0.0228	设置simulation intensity decay参数。仅在使用d3模拟引擎时适用。	✔️	✔️	✔️	✔️
d3VelocityDecay	number	0.4	节点的velocity decay，模拟介质阻力。仅在使用d3模拟引擎时适用。	✔️	✔️	✔️	✔️
ngraphPhysics	object	-	为ngraph指定自定义物理配置，遵循其配置对象语法。仅在使用ngraph模拟引擎时适用。		✔️	✔️	✔️
warmupTicks	number	0	在开始渲染之前，在启动时进行布局引擎循环的次数。	✔️	✔️	✔️	✔️
cooldownTicks	number	无穷大	在停止并冻结布局引擎之前要渲染的内置帧数。	✔️	✔️	✔️	✔️
cooldownTime	number	15000	在停止并冻结布局引擎之前要渲染的时间（毫秒）。	✔️	✔️	✔️	✔️
onEngineTick	func	-	在模拟引擎的每次滴答声时调用的回调函数。	✔️	✔️	✔️	✔️
onEngineStop	func	-	当模拟引擎停止并且布局冻结时调用的回调函数。	✔️	✔️	✔️	✔️

方法	参数	描述	2D	3D	VR	AR
d3Force	(string, [func])	访问控制d3模拟引擎的内部力。遵循与 d3-force-3d 的simulation.force相同的接口。默认包括三种力：'link'（基于forceLink），'charge'（基于forceManyBody）和 'center'（基于forceCenter）。这些力可以重新配置，或者可以向系统中添加新的力。仅在使用d3模拟引擎时适用。	✔️	✔️	✔️	✔️
d3ReheatSimulation	()	通过将 alpha 值设置为 1 来重新加热力模拟引擎。仅在使用d3模拟引擎时适用。	✔️	✔️	✔️	✔️

Prop	类型	默认值	描述	2D	3D	VR	AR
onNodeClick	func	-	节点（左键）点击的回调函数。节点对象和事件对象作为参数包含在内 onNodeClick(node, event)。	✔️	✔️	✔️	✔️
onNodeRightClick	func	-	节点右键点击的回调函数。节点对象和事件对象作为参数包含在内 onNodeRightClick(node, event)。	✔️	✔️
onNodeHover	func	-	节点鼠标悬停事件的回调函数。第一个参数是节点对象（如果指针视线中没有节点则为 null），第二个参数是前一个节点对象（或者为 null）：onNodeHover(node, prevNode)。	✔️	✔️	✔️	✔️
onNodeDrag	func	-	节点拖动交互的回调函数。在拖动节点过程中，每次节点位置更新时都会调用此函数。第一个参数是节点对象，第二个参数是自上次迭代以来坐标的变化，格式为 {x,y,z}：onNodeDrag(node, translate)。	✔️	✔️
onNodeDragEnd	func	-	节点拖动交互结束的回调函数。当释放节点时调用此函数。第一个参数是节点对象，第二个参数是节点初始位置的变化，格式为 {x,y,z}：onNodeDragEnd(node, translate)。	✔️	✔️
onLinkClick	func	-	链接（左键）点击的回调函数。链接对象和事件对象作为参数包含在内 onLinkClick(link, event)。	✔️	✔️	✔️	✔️
onLinkRightClick	func	-	链接右键点击的回调函数。链接对象和事件对象作为参数包含在内 onLinkRightClick(link, event)。	✔️	✔️
onLinkHover	func	-	链接鼠标悬停事件的回调函数。第一个参数是链接对象（如果指针视线中没有链接则为 null），第二个参数是前一个链接对象（或者为 null）：onLinkHover(link, prevLink)。	✔️	✔️	✔️	✔️
onBackgroundClick	func	-	节点和链接之间的空白区域点击事件的回调函数。事件对象作为单个参数包含在内 onBackgroundClick(event)。	✔️	✔️
onBackgroundRightClick	func	-	节点和链接之间的空白区域右键点击事件的回调函数。事件对象作为单个参数包含在内 onBackgroundRightClick(event)。	✔️	✔️
linkHoverPrecision	number	4	在近距离观察链接时（值较小）或从远处观察链接时（值较大）是否显示链接标签。	✔️	✔️
onZoom	func	-	缩放/平移事件的回调函数。当前缩放变换作为单个参数包含在内 onZoom({ k, x, y })。请注意，onZoom 由用户交互以及使用 zoom() 和 centerAt() 的程序化缩放/平移触发。	✔️
onZoomEnd	func	-	缩放/平移事件结束的回调函数。当前缩放变换作为单个参数包含在内 onZoomEnd({ k, x, y })。请注意，onZoomEnd 由用户交互以及使用 zoom() 和 centerAt() 的程序化缩放/平移触发。	✔️
controlType	string	trackball	在 3D 模式下控制相机的控件类型。选择 trackball、orbit 或 fly。		✔️
enableZoomInteraction	bool	true	是否在 2D 画布上启用缩放用户交互。	✔️
enablePanInteraction	bool	true	是否在 2D 画布上启用平移用户交互。	✔️
enableNavigationControls	bool	true	是否启用用于通过鼠标交互移动相机的轨道球导航控件（旋转/缩放/平移）。		✔️
enablePointerInteraction	bool	true	是否启用鼠标跟踪事件。这激活了一个内部跟踪器，用于追踪画布鼠标位置并启用对象悬停/点击和工具提示标签功能，但可能会降低性能。如果你希望获得图形性能的最大提升，建议关闭此属性。	✔️	✔️
enableNodeDrag	bool	true	是否启用通过点击拖动节点用户交互。如果启用，每次拖动节点时都会重新加热模拟，以便其他节点对变化做出反应。只有在 enablePointerInteraction 为 true 时才适用。	✔️	✔️
nodePointerAreaPaint	func	默认交互区域是节点中心的圆形，大小根据 val 确定。	用于检测节点指针交互的画布区域绘制回调函数。提供的绘制颜色唯一标识节点，并应用于在提供的画布上下文中执行绘制操作。这个绘制的区域不会显示，而是用于检测与节点的指针交互。回调函数的签名为：nodePointerAreaPaint(<node>, <color>, <canvas context>, <current global scale>)。	✔️
linkPointerAreaPaint	func	默认交互区域是源节点和目标节点之间的直线。	用于检测链接指针交互的画布区域绘制回调函数。提供的绘制颜色唯一标识链接，并应用于在提供的画布上下文中执行绘制操作。这个绘制的区域不会显示，而是用于检测与链接的指针交互。回调函数的签名为：linkPointerAreaPaint(<link>, <color>, <canvas context>, <current global scale>)。	✔️

工具方法

方法	参数	描述	2D	3D	VR	AR
getGraphBbox	([nodeFilterFn])	返回图中节点的当前边界框，格式为 { x: [<num>, <num>], y: [<num>, <num>], z: [<num>, <num>] }。如果没有找到节点，则返回 null。接受一个可选参数来定义自定义节点过滤器：node => <boolean>，如果节点应包含在计算中，则应返回一个真值。这对于计算图中某部分的边界框非常有用。	✔️	✔️	✔️	✔️
screen2GraphCoords	(x, y[, distance])	将视口坐标转换为图域的工具方法。给定一对 x,y 屏幕坐标，以及可选的 3D 模式下的相机距离，返回当前等效的 {x, y (, z)} 图节点坐标。	✔️	✔️
graph2ScreenCoords	(x, y[, z])	将节点坐标转换为视口域的工具方法。给定一组 x,y(,z) 图坐标，返回当前等效的 {x, y} 视口坐标。	✔️	✔️

输入JSON语法

{
    "nodes": [ 
        { 
          "id": "id1",
          "name": "name1",
          "val": 1 
        },
        { 
          "id": "id2",
          "name": "name2",
          "val": 10 
        },
        ...
    ],
    "links": [
        {
            "source": "id1",
            "target": "id2"
        },
        ...
    ]
}

回馈支持

如果本项目对您有所帮助，并且您愿意回赠支持，不妨请我喝杯咖啡 ☕！