3d-force-graph使用及相关设置
首先安装3d-force-graph
模块到项目依赖:
npm install 3d-force-graph
在需要使用的vue页面中导入
1 2 3 | import ForceGraph3D from '3d-force-graph' // threejs的精灵标签,用于文字的展示 import SpriteText from 'three-spritetext' |
1.基本使用
1 | const Graph = ForceGraph3D()(document.getElementById( '3d-graph' )).graphData(gData); |
2.加载数据
1 2 3 4 | // DOM初始化及数据挂载 const elm = document.getElementById('3d-graph') this.Graph = ForceGraph3D()(elm) .graphData(this.data) |
3.设置画布样式示例
1 2 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 |
本文来自博客园,作者:zwbsoft,转载请注明原文链接:https://www.cnblogs.com/zwbsoft/p/16892711.html
电话微信:13514280351
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战