3d-force-graph使用及相关设置

首先安装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