3D知识图谱可视化

最新推荐文章于 2024-03-05 15:57:58 发布

VIP文章 Peng711

最新推荐文章于 2024-03-05 15:57:58 发布

阅读量1.4w

点赞数 17

分类专栏： Vue 前端可视化知识图谱文章标签： vue.js 知识图谱 d3.js three.js

本文链接：https://blog.csdn.net/tiandao451/article/details/110354378

版权

一、参考代码

在这里插入图片描述

知识图谱一般包含节点和关系两类数据，之前在做2D可视化展示时：

主要是通过svg完成图形的绘制，而此时每一个节点、关系和文本都会对应一个DOM元素。如果为了做大规模知识图谱展示，当节点个数上千上万时，由于DOM操作的低效性，浏览器在可视化渲染到动态交互上都存在性能问题，此时应该减少DOM操作。

这里简单介绍一下关于操作DOM对性能的影响，它会直接或间接地影响渲染引擎工作，而浏览器分为：渲染引擎 和 JS引擎，再往下又涉及到浏览器渲染页面底层原理及过程，这里不再具体展开。

其中 layout（布局）和paint（绘制）的性能消耗是最大的部分：

总的来说，为了更好的展示大规模的知识图谱，需要用到3D技术，完成有限的区域容纳更多的节点信息。

比如在之前使用 vue+d3v6实现动态知识图谱可视化展示存在明显的性能问题，该代码需要展示：

以本人构建的外贸企业图谱为例，从Neo4j Desktop中导出大小为3.7MB的JSON文件信息如下：

在这里插入图片描述
可以看到有近20万行的JSON数据，如果加载该JSON，就会导致浏览器卡死。

此时有几种优化思路：

通过浏览器调试工具的 performance ，可以看到在分别使用2d和3d初始化页面时，浏览器执行的详细信息对比如下：

首先需要说明，在CPU和GPU的使用和占有率上来说，3d渲染肯定比2d要高。但是，从时间上来看，几百节点就已经看出明显的差距（Rendering/Painting/Idle），如果节点数量上万，可能会更明显。

个人还是推荐使用第三方模块，这个东西的学习成本还是比较高的。。

创建一个vue项目：

vue create 3d-graph-demo

安装3d-force-graph模块到项目依赖：

npm i -S 3d-force-graph

在vue中导入3D库

import ForceGraph3D from '3d-force-graph'
// threejs的精灵标签，用于文字的展示
import SpriteText from 'three-spritetext'

3d渲染的初始化代码，包括数据解析、数据渲染

// 3d初始化，包括数据解析、数据渲染
threeInit (

关注