VR 中3D 强制定向图
一个网络组件,在虚拟现实中用由力导的迭接布局来代表一个图表数据结构. 用途 A - Frame (英语) 用于 VR 渲染和 d3-兵力-3d 用于布局物理引擎.
另见 AR 版本, (中文(简体) ), WebGL 三维版本,则 A-Frame 组件版本(框架-forcegraph-组件)。 。 。 .
看看这个 反应绑定。 。 。 .
实例
- 基础 (单位:千美元)来源(中文(简体) )
- 同步负载 (单位:千美元)来源(中文(简体) )
- 更大的图 (~4k 元素) (单位:千美元)来源(中文(简体) )
- 方向箭头 (单位:千美元)来源(中文(简体) )
- 方向移动粒子 (单位:千美元)来源(中文(简体) )
- 曲线行和自链接 (单位:千美元)来源(中文(简体) )
- 自动有色节点/链接 (单位:千美元)来源(中文(简体) )
- 文本作为节点 (单位:千美元)来源(中文(简体) )
- 作为节点的图像 (单位:千美元)来源(中文(简体) )
- 自定义节点几何 (单位:千美元)来源(中文(简体) )
- 链接中的案文 (单位:千美元)来源(中文(简体) )
- 动态数据变化 (单位:千美元)来源(中文(简体) )
- 节点相撞探测 (单位:千美元)来源(中文(简体) )
- 按需将颗粒连接起来 (单位:千美元)来源(中文(简体) )
支持此项目
如果您认为此模块有用并愿意支持其开发, 您可以 给我买个您的贡献有助于保持开源的可持续性 !
快开始
import ForceGraphVR from '3d-force-graph-vr';
或使用 脚本 标签
<script src="//cdn.jsdelivr.net/npm/3d-force-graph-vr"></script>
接下来
const myGraph = new ForceGraphVR(myDOMElement)
.graphData(myData);
请在您的应用程序中装入此脚本标签 A-frame 要正常运行 :
<script src="//cdn.jsdelivr.net/npm/aframe"></script>
API 参考
数据输入
| 方法 | 说明 | 默认 |
|---|---|---|
| 图表数据([数据) | Getter/stetter用于图表数据结构(见下文语法细节). | { nodes: [], links: [] } |
| 日出尔([url 密码) | 直接从 JSON 文件装入图表数据的 URL, 作为指定选项 图表数据 直接说. | |
| 节点([字符串) | 唯一节点id的节点对象访问器属性(用于链接对象源/目标). | id |
| 链接来源([字符串) | 链接对象访问器属性,指源节点的ID. | source |
| 链接目标([字符串) | 链接对象存取器属性,指目标节点的id. | target |
集装箱布局
| 方法 | 说明 | 默认 |
|---|---|---|
| 宽度([ưμ㼯a) | 画布宽度的取取取器/ 取取取器 . | < 窗口宽度 > |
| 高度([ưμ㼯a) | 显示画布高度. | < 窗口高度 > |
| 背景颜色([字符串) | 图表背景颜色的获取器/ 改进器 . | #000011 |
| 显示 Nav 信息([布尔) | 是否显示导航控制页脚信息 . | true |
节点样式
| 方法 | 说明 | 默认 |
|---|---|---|
| 节点RelSize([数字) | 每个值单位的节点球体体积(cubic px)之比的获取器/改进器. | 页:1 |
| 节点Val([数字, (中文(简体) ), 字符串 或者说 fn 时) | 节点对象存取器函数,属性或节点数字值的数值常数(影响球体体积). | val |
| 节点标签([字符串 或者说 fn 时) | 节点对象访问器的功能或名称属性(在标签中显示). | name |
| 节点Desc([字符串 或者说 fn 时) | 用于描述的节点对象访问器功能或属性(在标签下shown). | desc |
| 节点可见度([布尔, (中文(简体) ), 字符串 或者说 fn 时) | 用于是否显示节点的节点对象访问器函数,属性或布尔常数. | true |
| 节点颜色([字符串 或者说 fn 时) | 节点对象访问器对节点颜色的功能或属性(影响球体颜色). | color |
| 节点自动颜色By([字符串 或者说 fn 时) | 节点对象访问器功能( E)fn(node))或属性(例如. 'type')自动组合颜色。 只影响没有颜色属性的节点. | |
| 节点距离([数字) | 节点球体不透明度的取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取. | 0.75 (简体中文) |
| 节点解析([数字) | 每个节点几何分辨率的取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 更高的数值产生更平滑的球体. | 第8条 |
| 节点三对象([对象3d, (中文(简体) ), 字符串 或者说 fn 时) | 用于生成自定义 3d 对象的节点对象访问器功能或属性以渲染为图节点. 应返回实例 3JS 对象3d如为 叶子 值返回时,该节点将使用默认的3d对象类型. | 默认节点对象是一个球体,大小按照 val 并按 color。 。 。 . |
| 节点三对象外出([嘘, (中文(简体) ), 字符串 或者说 fn 时) | 在使用自定义时是否替换默认节点的节点对象访问器函数、属性或布尔值 nodeThreeObject (单位:千美元)false或予以延长(true) (中文(简体) ). | false |
链接样式
| 方法 | 说明 | 默认 |
|---|---|---|
| 链接标签([字符串 或者说 fn 时) | 链接对象访问器函数或名称属性(在标签中显示). | name |
| 链接Desc([字符串 或者说 fn 时) | 链接对象存取器函数或属性描述(在标签下shown). | desc |
| 链接可视性([布尔, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象访问器函数,属性或布尔常数,用于是否显示链接行. 价值为 false 保持连接力而不渲染. | true |
| 链接颜色([字符串 或者说 fn 时) | 链接对象访问器功能或属性为行色. | color |
| 链接自动颜色By([字符串 或者说 fn 时) | 链接对象访问器功能( L)fn(link))或属性(例如. 'type')自动组合颜色。 只影响没有色彩属性的链接. | |
| 链接([数字) | 连接线不透明取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取. | 0.2 (韩语) |
| 链接窗口([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象访问器功能,属性或链接行宽的数值常数. 值为 0 的值将变成 三JS线 宽度不变的(1px无论距离如何。 值被四舍五入到最近的小数,以进行索引. | 0 个 |
| 链接决议([数字) | 每个链接的几何分辨率的取出器/取出器,用多少光圈分出圆柱来表示. 较高的数值产生更平滑的圆柱. 仅适用于正宽度的链接. | 6个 |
| 链接([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器的功能,属性或链接线曲率半径的数值常数. 曲线以3D贝塞尔曲线表示,任何数值都接受. 价值为 0 使直线. 1 表示半径等于线长的一半,使曲线近似于半圆. 自我参考链接source 等于 target)曲线作为环绕节点的回路来表示,长度与曲率值成正比. 行为正值的顺时针曲线,为负值的逆时针. 注意渲染曲线线条纯粹是一种视觉效果,并不影响基础力的行为. | 0 个 |
| 链接浏览旋转([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器函数,属性或数值常数,用于沿行轴旋转来应用到曲线上. 对直线没有影响 时 0 旋转,曲线方向为相交点的方向 XY 飞机 旋转角(以弧度表示)会从这个参考方向绕出"从起到去"的轴来顺时针旋转曲线行走. | 0 个 |
| 链接元件([材料, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象访问器功能或属性,用于指定自定义的材料来给图形链接样式. 应返回实例 三个JS材料如为 叶子 值将返回,默认材料将用于此链接. | 默认链接材料是 梅斯兰伯特材料公司 样式按照 color 财务报告和审定财务报表 opacity。 。 。 . |
| 链接三对象([对象3d, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器功能或属性,用于生成自定义的 3d 对象来渲染为图链接. 应返回实例 3JS 对象3d如为 叶子 值返回时,该链接将使用默认的 3d 对象类型. | 默认链接对象是一个行或圆柱形,大小按照 width 并按 material。 。 。 . |
| 链接三对象扩展([嘘, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象访问器函数、属性或布尔值,用于在使用自定义时是否替换默认链接 linkThreeObject (单位:千美元)false或予以延长(true) (中文(简体) ). | false |
| 链接选项更新([fn(link Object, { start, end}, link) 主题主题 主题 主题 主题) | 自定义函数需要更新链接在每次转换时的位置。 它收到相应的链接 ThreeJS Object3d,则 start 财务报告和审定财务报表 end 坐标:{x,y,z} 和链接的 data。如果函数返回一个真实值,则正则位置更新函数将不会运行于该链接. | |
| 链接方向箭头Length([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象访问器函数,属性或表示链接方向性的箭头长度的数值常数. 箭头直接显示在链接线上,指向方向 source > 翻译: target。数值为 0 藏出箭来. | 0 个 |
| 链接方向箭头颜色([字符串 或者说 fn 时) | 为箭头的颜色链接对象访问器功能或属性. | color |
| 链接方向箭头RelPos([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器函数、属性或箭头沿链接线纵向位置的数值常数,以比例表示 0 财务报告和审定财务报表 1时 0 表示紧接 source 节点, 1 旁边 target 节点,和 0.5 就在中间. | 0.5 (韩语) |
| 链接方向箭头分辨率([数字) | 箭头几何分辨率取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 更高的值产生更平滑的箭头. | 第8条 |
| 链接方向 文章([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器函数,属性或数常数,用于在链接行上显示的粒子数(小球). 颗粒沿线分布等距,行走方向 source > 翻译: target,并可用于表示链接方向性. | 0 个 |
| 线性粒子([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象访问器的函数,属性或方向粒子速度的数值常数,以每个帧的链接长度与行程之比来表示. 以上数值 0.5 被劝阻. | 0.01 (简体中文) |
| 链接直线粒子集([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器函数,属性或一个数值常数来抵消方向粒子初始位置,相对于一个完整的位置周期,表示为0到1之间的值. | 0 个 |
| 链接直线粒子Width([数字, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器的功能,属性或方向粒子宽度的数值常数. 值被四舍五入到最近的小数,以进行索引. | 0.5 (韩语) |
| 线性粒子颜色([字符串 或者说 fn 时) | 将对象存取器功能或属性连接到方向粒子颜色. | color |
| 链接直线粒子解析([数字) | 每个方向粒子的几何分辨率取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取的取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 更高的值产生更平滑的粒子. | 页:1 |
| 链接直线粒子三对象([对象3d, (中文(简体) ), 字符串 或者说 fn 时) | 链接对象存取器功能或属性,用于自定义的3d对象,用于方向粒子. 应返回实例 3JS 对象3d。激活此选项将忽略粒子宽度、颜色和分辨率的设定值. | |
| 发射粒子(单位:千美元)链接(中文(简体) ) | 一种生成粒子的替代机制,这种方法释放出一个特定环节内的非周期性单粒子. 所排放的粒子共享正态粒子道具的造型(速度,形状,颜色). 一个有效的 link 包含在 graphData 应作为单一参数来通过. |
互动
| 方法 | 说明 | 默认 |
|---|---|---|
| 在节点Hover上([fn 时) | 节点悬浮事件召回函数 。 节点对象(或 null 如果直接在指向视线下有节点)作为第一个参数包含,而上一个节点对象(或 null作为第二个论据. | - 说吧 |
| 在 LinkHover 时([fn 时) | 链接徘徊事件的召回功能 。 链接对象(或 null 如果直接在指向视线下没有链接)作为第一个参数列入,而上一个链接对象(或 null作为第二个论据. | - 说吧 |
| 在节点上([fn 时) | 节点点击事件召回函数 。 将节点对象列为唯一参数. | - 说吧 |
| 在 LinkClick 上 (英语)([fn 时) | 链接点击事件召回功能 。 链接对象列为唯一参数. | - 说吧 |
强制引擎配置
| 方法 | 说明 | 默认 |
|---|---|---|
| 强制引擎([字符串) | 用于强模拟发动机的取取器/取取取器((单位:千美元) 或者说 图形) (中文(简体) ). | d3 |
| 数字([单位) | 以1、2 或 3 进行力模拟的维数获得/改进器. | 3个 |
| 数字模式([字符串) | 根据图表方向性应用布局约束. 只为正确工作 数据 图表结构(没有周期)。 选择 td (自上而下), bu (自下而上), lr (从左到右), rl (从右到左), zout (相近相接相接相接相接), zin (远至相近), radialout (辐射外)或 radialin (入而为通. | |
| 数字等级差异([数字) | 若为 dagMode 中,此选项指定不同图表深度之间的距离. | 自动取自节点数 |
| dag 节点过滤器([fn 时) | 节点访问器功能可以指定节点,以便在DAG布局处理过程中忽略. 此访问器方法接收到一个节点对象,并应返回 a boolean 值表示是否要包含节点。 被排除在外的节点将不受限制,并可自由向任何方向移动. | node => true |
| 默认错误([fn 时) | 如果在 DAG 版式处理数据结构时遇到周期, 请调用 。 图表的回路段作为节点代号的阵列包含在其中以供参考. 默认情况下, 每当遇到循环时都会丢出一个例外 。 您可以将这种方法覆盖到外部处理此案件, 并允许图表继续 DAG 处理 。 如果遇到回路,严格地图的方向性得不到保证,结果就是建立分级制度的最佳努力. | 丢弃例外 |
| d3 阿尔法明([数字) | 获取/获取 模拟阿尔法分 参数,仅在使用d3模拟引擎时适用. | 0 |
| d3 阿尔法德克([数字) | 获取/获取 模拟强度衰减 参数,仅在使用d3模拟引擎时适用. | 0.0228 |
| d3 速度减速([数字) | 节点的取取器/取取取器 速度衰减 模拟介质电阻,只有在使用d3模拟引擎时才适用. | 0.4 |
| d3 部队(单位:千美元)字符串, [fn 时) | 用于控制d3模拟引擎的内部力量的Getter/Setter. 跟随相同的接口 d3-force-3d是因为 模拟默认情况下包含三种力量: 'link' (基于 强制链接, (中文(简体) ), 'charge' (基于 强力MnyBody和 'center' (基于 强制中心) (中文(简体) ). 这些部队中的每一支都可以被重新配置,或者在系统中加入新的部队. 这种方法只有在使用d3模拟引擎时才适用. | |
| d3再热模拟(a) 与《公约》有关的其他事项 | 通过设置 alpha 值为 1。只有在使用 d3 模拟引擎时才适用. | |
| 绘图物理([对象) | 根据 ngraph 的自定义物理配置 配置对象 语法. 这种方法只有在使用ngraph模拟引擎时才适用. | 负图默认 |
| 热身图([单位) | 在开始渲染前, 点火时, 要将排版引擎周期数调取为干燥运行 . | 0 个 |
| 冷却图([单位) | 在停止并冻结布局引擎之前, 需要配置多少个内置框架 . | 无穷 |
| 冷却时间([数字) | 在停止并冻结布局引擎之前, 需要多久( ms) 才能完成 . | 15000个 |
| 引擎类型(单位:千美元)fn 时(中文(简体) ) | 在模拟引擎的每一个勾选时引用回调函数 . | - 说吧 |
| 引擎停止(单位:千美元)fn 时(中文(简体) ) | 当模拟引擎停止并被冻结布局时,引用回调函数. | - 说吧 |
| 刷新(a) 与《公约》有关的其他事项 | 重新绘制所有节点/链接. |
工具
| 方法 | 说明 |
|---|---|
| 获取图形框([节点FilterFn) | 返回图表中节点的当前边框,格式化为 { x: [<num>, <num>], y: [<num>, <num>], z: [<num>, <num>] }。如果找到节点,返回 null。接受定义自定义节点过滤器的可选参数 : node => <boolean>,如果要包含节点,则该节点应当返回真实值。 这可用于计算图中一部分的边框. |
输入 JSON 语法
{
"nodes": [
{
"id": "id1",
"name": "name1",
"val": 1
},
{
"id": "id2",
"name": "name2",
"val": 10
},
...
],
"links": [
{
"source": "id1",
"target": "id2"
},
...
]
}