首先安装3d-force-graph模块到项目依赖：
npm install 3d-force-graph
在需要使用的vue页面中导入
import ForceGraph3D from '3d-force-graph'
// threejs的精灵标签，用于文字的展示
import SpriteText from 'three-spritetext'
1.基本使用
const Graph = ForceGraph3D()(document.getElementById('3d-graph')).graphData(gData);
2.加载数据
// DOM初始化及数据挂载
const elm = document.getElementById('3d-graph')
this.Graph = ForceGraph3D()(elm)
.graphData(this.data)
3.设置画布样式示例
this.Graph.height(750).width(1200).backgroundColor('#9dadc1')
// 节点样式和标签设置
.nodeRelSize(7)
4.节点样式
| 方法 | 描述 | 默认 |
|---|
| nodeRelSize([num]) |
每个值单位的节点球体体积 (cubic px) 的比率的 getter/setter。 |
4 |
| nodeVal([num, str or fn]) |
节点对象访问器函数、属性或节点数值的数字常量（影响球体体积）。 |
val |
| nodeLabel([str or fn]) |
名称的节点对象访问器函数或属性（显示在标签中）。支持纯文本或 HTML 内容。请注意，此方法在innerHTML内部使用，因此请确保预先清理任何用户输入的内容以防止 XSS 漏洞。 |
name |
| nodeVisibility([boolean, str or fn]) |
节点对象访问器函数、属性或布尔常量，用于是否显示节点。 |
true |
| nodeColor([str or fn]) |
节点颜色的节点对象访问器函数或属性（影响球体颜色）。 |
color |
| nodeAutoColorBy([str or fn]) |
节点对象访问器函数（fn(node)）或属性（例如'type'）自动分组颜色。只影响没有颜色属性的节点。 |
|
| nodeOpacity([num]) |
节点球体不透明度的获取器/设置器，在 [0,1] 之间。 |
0.75 |
| nodeResolution([num]) |
每个节点的几何分辨率的getter/setter，用多少个切片段来划分圆周。较高的值会产生更平滑的球体。 |
8 |
| nodeThreeObject([Object3d, str or fn]) |
用于生成自定义 3d 对象以呈现为图形节点的节点对象访问器函数或属性。应该返回ThreeJS Object3d的一个实例。如果返回虚假值，则将使用默认的 3d 对象类型代替该节点。 |
默认节点对象是一个球体，大小val根据color. |
| nodeThreeObjectExtend([bool, str or fn]) |
节点对象访问器函数、属性或布尔值，用于在使用自定义nodeThreeObject( false) 或扩展它时 ( true) 是否替换默认节点。 |
false |
| onNodeClick ( fn ) |
节点（左键）点击的回调函数。节点对象和事件对象作为参数包含在内onNodeClick(node, event)。 |
- |
| onNodeRightClick ( fn ) |
节点右键的回调函数。节点对象和事件对象作为参数包含在内onNodeRightClick(node, event)。 |
- |
| onNodeHover ( fn ) |
节点鼠标悬停事件的回调函数。节点对象（或者null如果在鼠标视线下没有节点）作为第一个参数包含，前一个节点对象（或 null）作为第二个参数：onNodeHover(node, prevNode). |
- |
| onNodeDrag ( fn ) |
节点拖动交互的回调函数。在拖动节点时，每次更新其位置时都会重复调用此函数。节点对象作为第一个参数包含在内，自该函数上次迭代以来坐标的变化作为第二个参数包含在格式 {x,y,z}:onNodeDrag(node, translate)中。 |
- |
| onNodeDragEnd ( fn ) |
节点拖动交互结束的回调函数。该函数在节点释放时调用。节点对象作为第一个参数包含在内，从初始位置开始的坐标的整个变化都作为格式 {x,y,z}: 的第二个参数包含在内onNodeDragEnd(node, translate)。 |
- |
5.链接样式
| 方法 | 描述 | 默认 |
|---|
| linkLabel([str or fn]) |
链接对象访问器函数或名称的属性（显示在标签中）。支持纯文本或 HTML 内容。请注意，此方法在innerHTML内部使用，因此请确保预先清理任何用户输入的内容以防止 XSS 漏洞。 |
name |
| linkVisibility ([ boolean,str or fn ]) |
链接对象访问器函数、属性或布尔常量，用于是否显示链接线。值false保持链接力而不渲染它。 |
true |
| linkColor([str or fn]) |
链接对象访问器函数或线条颜色的属性。 |
color |
| linkAutoColorBy([str or fn]) |
链接对象访问器函数 ( fn(link)) 或属性 (例如'type') 以自动对颜色进行分组。仅影响没有颜色属性的链接。 |
|
| linkOpacity([num]) |
用于链接线不透明度的获取器/设置器，在 [0,1] 之间。 |
0.2 |
| linkWidth([num,str or fn]) |
链接对象访问器函数、属性或链接线宽的数字常量。值为零将呈现一个ThreeJS Line，其宽度是恒定的 ( 1px) 而与距离无关。出于索引目的，值四舍五入到最接近的小数 |
0 |
| linkResolution([num]) |
每个链接的几何分辨率的获取器/设置器，以划分圆柱体的径向段数表示。较高的值会产生更平滑的圆柱体。仅适用于具有正宽度的链接。 |
6 |
| linkCurvature([num,str or fn]) |
链接对象访问器函数、属性或链接线曲率半径的数值常数。曲线表示为 3D 贝塞尔曲线，可接受任何数值。的值0呈现一条直线。1表示半径等于直线长度的一半，使曲线近似为半圆。对于自参考链接（source等于target），曲线表示为围绕节点的环，其长度与曲率值成正比。正值的线顺时针弯曲，负值的线逆时针弯曲。请注意，渲染曲线纯粹是一种视觉效果，不会影响基础力的行为。 |
0 |
| linkCurveRotation([num,str or fn]) |
链接对象访问器函数、属性或数字常量，用于沿线轴旋转以应用于曲线。对直线没有影响。旋转时0，曲线朝向与XY平面相交的方向。旋转角度（以弧度为单位）将从该参考方向围绕“开始到结束”轴顺时针旋转曲线。 |
0 |
| linkMaterial([Material,str or fn]) |
链接对象访问器函数或属性，用于指定自定义材料以设置图形链接的样式。应该返回ThreeJS Material的一个实例。如果返回虚假值，则将使用默认材料代替该链接。默认链接材质为MeshLambertMaterial样式，根据color和opacity。 |
|
| linkThreeObject([Object3d,str or fn]) |
链接对象访问器函数或属性，用于生成自定义 3d 对象以呈现为图形链接。应该返回ThreeJS Object3d的一个实例。如果返回虚假值，则默认的 3d 对象类型将用于该链接。默认链接对象是一条线或圆柱体，大小width根据material. |
|
| linkThreeObjectExtend([bool,str or fn]) |
linkThreeObject链接对象访问器函数、属性或布尔值，用于在使用自定义( )时是否替换默认链接false或扩展它 ( true)。 |
false |
| linkPositionUpdate([fn(linkObject,{start,end},link)]) |
用于在每次渲染迭代时调用更新链接位置的自定义函数的 getter/setter。它接收相应的链接ThreeJS Object3d、链接的start和end坐标（{x,y,z}每个）以及链接的data. 如果函数返回一个真值，则不会为该链接运行常规位置更新函数。 |
|
| linkDirectionalArrowLength ( [num, str or fn] ) |
链接对象访问器函数、属性或用于指示链接方向性的箭头长度的数字常量。箭头直接显示在链接线上，并指向source>的方向target。值0隐藏箭头。 |
true |
| linkDirectionalArrowColor([str or fn]) |
链接对象访问器函数或箭头颜色的属性。 |
color |
| linkDirectionalArrowRelPos([num,str or fn]) |
链接对象访问器函数、属性或一个数字常量，用于箭头沿链接线的纵向位置，表示为 和 之间的比率0，1其中0表示紧邻source节点、1紧邻target节点和0.5正中间。 |
0.5 |
| linkDirectionalArrowResolution([num]) |
箭头几何分辨率的 getter/setter，以分割锥底圆周的切片段数表示。较高的值会产生更平滑的箭头。 |
8 |
| linkDirectionalParticles([num,str or fn]) |
链接对象访问器函数、属性或用于显示在链接线上的粒子（小球体）数量的数字常量。粒子沿线等距分布，沿source>方向行进target，可用于指示链接方向性。 |
0 |
| linkDirectionalParticleSpeed([num,str or fn]) |
链接对象访问器函数、属性或定向粒子速度的数值常数，表示为链接长度与每帧行进的比率。0.5不鼓励使用上述值。 |
0.1 |
| linkDirectionalParticleWidth([num,str or fn]) |
链接对象访问器函数、属性或定向粒子宽度的数值常量。出于索引目的，值四舍五入到最接近的小数。 |
0.5 |
| linkDirectionalParticleColor([str or fn]) |
定向粒子颜色的链接对象访问器函数或属性。 |
color |
| linkDirectionalParticleResolution([num]) |
每个定向粒子的几何分辨率的 getter/setter，以分割圆周的切片段数表示。较高的值会产生更平滑的粒子。 |
4 |
| emitParticle(link) |
作为生成粒子的替代机制，此方法在特定链接中发射非循环单个粒子。发射的粒子共享常规粒子道具的样式（速度、宽度、颜色）。包含的有效link对象graphData应作为单个参数传递。 |
|
| onLinkClick ( fn ) |
链接（左键）点击的回调函数。链接对象和事件对象作为参数包含在内onLinkClick(link, event)。 |
- |
| onLinkRightClick ( fn ) |
链接右键的回调函数。链接对象和事件对象作为参数包含在内onLinkRightClick(link, event)。 |
- |
| onLinkHover ( fn ) |
链接鼠标悬停事件的回调函数。链接对象（或者null如果在鼠标视线下没有链接）作为第一个参数包含，前一个链接对象（或 null）作为第二个参数：onLinkHover(link, prevLink). |
- |
6. 初始化配置
| 配置选项 | 描述 | 默认 |
|---|
| controlType：字符 |
使用哪种类型的控件来控制相机。trackball、orbit或fly之间进行选择。 |
trackball |
| rendererConfig：对象 |
要传递给ThreeJS WebGLRenderer构造函数的配置参数 |
{ antialias: true, alpha: true } |
| extraRenderers : 数组 |
如果您希望包含需要专用渲染器的自定义对象WebGL，例如CSS3DRenderer，请在此数组中包含那些额外的渲染器实例。 |
[ ] |
7.容器布局
| 方法 | 描述 | 默认 |
|---|
| width([px]) |
画布宽度的getter/setter |
<window width> |
| height([px]) |
画布高度的getter/setter |
<window height> |
| backgroundColor([str]) |
图表背景颜色的getter/setter |
#000011 |
| showNavInfo([boolean]) |
是否显示导航控件页脚信息的getter/setter |
true |
