一个 Web 组件，使用强制导向的迭代布局来表示 3 维空间中的图形数据结构。使用ThreeJS /WebGL 进行 3D 渲染，使用d3-force-3d或ngraph作为底层物理引擎。
相关参阅2D 画布版、VR 版和AR 版、React 绑定。
Githup:https://github.com/vasturiano/3d-force-graph
3d-force-graph
语言
语言
开始使用
安装 npm install 3d-force-graph
import ForceGraph3D from '3d-force-graph';
//或者 const ForceGraph3D = require('3d-force-graph');
或者
代码内使用
const myGraph = ForceGraph3D();
myGraph()
.graphData();
//视图容器html元素
//数据格式
主要内容结构
结构图
一、数据格式
数据格式
{
"nodes": [
{
"id": "id1",
"name": "李明",
"val": 1
},
{
"id": "id2",
"name": "王紫",
"val": 10
},
...
],
"links": [
{
"source": "id1",
"target": "id2"
},
...
]
}
二、节点样式
| 方法 | 描述 | 默认 |
|---|---|---|
| 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)。 | - |
三、链接样式
| 方法 | 描述 | 默认 |
|---|---|---|
| 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). | - |
四、相关配置
1.初始化配置
ForceGraph3d({ configOptions })()
| 配置选项 | 描述 | 默认 |
|---|---|---|
| controlType：字符 | 使用哪种类型的控件来控制相机。trackball、orbit或fly之间进行选择。 |
trackball |
| rendererConfig：对象 | 要传递给ThreeJS WebGLRenderer构造函数的配置参数 |
{ antialias: true, alpha: true } |
| extraRenderers : 数组 | 如果您希望包含需要专用渲染器的自定义对象WebGL，例如CSS3DRenderer，请在此数组中包含那些额外的渲染器实例。 |
[ ] |
2.容器布局
| 方法 | 描述 | 默认 |
|---|---|---|
| width([px]) | 画布宽度的getter/setter | |
| height([px]) | 画布高度的getter/setter | |
| backgroundColor([str]) | 图表背景颜色的getter/setter | #000011 |
| showNavInfo([boolean]) | 是否显示导航控件页脚信息的getter/setter | true |
五、其他拓展
1.引入外部模型
// 引入外部模型 <-- star -->
const loader = new THREE.GLTFLoader().setPath( './' );
loader.load( 'gltf/gift.gltf', function ( gltf ) {
gltf.scene.scale.set( 10.0, 10.0, 10.0 );
console.log("gltf",gltf);
//添加材质
gltf.scene.children[0].material = new THREE.MeshLambertMaterial({
color: Math.round(Math.random() * Math.pow(2, 24)),//材质颜色
})
scene.add( gltf.scene );//添加到场景
} );
// 引入外部模型 <-- end -->
2.加入天空盒子
// 引入天空盒子 <-- star -->
var path = '/sky/'
var format = '.jpg'
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
]
var materials = []
for (var i = 0; i < urls.length; ++i) {
var loader = new THREE.TextureLoader()
// loader.setCrossOrigin( this.crossOrigin );
var texture = loader.load(urls[i], function () {}, undefined, function () {})
materials.push(new THREE.MeshBasicMaterial({
map: texture,
side: THREE.BackSide
// transparent: true,
// needsUpdate:true
})
)
}
var cube = new THREE.Mesh(new THREE.BoxGeometry(9000, 9000, 9000), materials)
cube.name = 'sky'
scene.add(cube)
// 引入天空盒子 <-- end -->
附：官方案例
- 基本（来源）
- 异步加载（来源）
- 更大的图（~4k 元素）（来源）
- 方向箭头（来源）
- 定向运动粒子（源）
- 曲线和自链接（来源）
- 自动着色节点/链接（来源）
- 文本作为节点（来源）
- 图像作为节点（来源）
- 节点中的 HTML（源）
- 自定义节点几何图形（来源）
- 渐变链接（来源）
- 链接中的文字（来源）
- 轨道控制（来源）
- 飞行控制（来源）
- 相机自动绕轨（来源）
- 点击关注节点（源码）
- 单击以展开/折叠节点（源）
- 拖动后修复节点（来源）
- 使图形适合画布（来源）
- 突出显示节点/链接（来源）
- 多节点选择（来源）
- 动态数据变化（来源）
- 节点碰撞检测（来源）
- 操纵连杆力距离（来源）
- 按需发射链接粒子（来源）
- 力导向树（DAG 模式）（来源）
- yarn.lock 依赖图（DAG 模式）（来源）
- 将外部对象添加到场景（源）
- Bloom后处理效果（来源）
- 暂停/恢复动画（来源）