CN111598988B - 一种基于d3的知识图谱数据节点渲染方法及系统 - Google Patents
一种基于d3的知识图谱数据节点渲染方法及系统 Download PDFInfo
- Publication number
- CN111598988B CN111598988B CN202010423078.XA CN202010423078A CN111598988B CN 111598988 B CN111598988 B CN 111598988B CN 202010423078 A CN202010423078 A CN 202010423078A CN 111598988 B CN111598988 B CN 111598988B
- Authority
- CN
- China
- Prior art keywords
- coordinates
- canvas
- webgl
- rendering
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
- G06F16/36—Creation of semantic tools, e.g. ontology or thesauri
- G06F16/367—Ontology
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Life Sciences & Earth Sciences (AREA)
- Computational Linguistics (AREA)
- Animal Behavior & Ethology (AREA)
- Computer Graphics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明涉及一种基于D3的知识图谱数据节点渲染方法及系统,该方法包括:构建一个静态工程并在所述静态工程中引入数字可视化工具D3;将知识图谱数据节点的2D坐标由JSON格式转换为二进制;将转换得到的二进制的2D坐标转换为3D坐标;在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染。本发明的有益效果是:1.提高知识图谱的展示数据节点的数据量;2.提高D3对CPU、GPU的利用率;3.提高知识图谱在大数据量下的交互流畅性。
Description
技术领域
本发明涉及信息技术web开发领域,具体涉及一种基于D3的知识图谱数据节点渲染方法及系统。
背景技术
当前行业内的知识图谱大多基于数字可视化工具D3,但现有的D3对大数据量的展示有限,极限展示大约5000个知识图谱节点,并且D3对电脑的CPU、GPU利用率低,在大数据量展示下进行交互操作流畅性很低,容易使得页面陷入卡死状态。
发明内容
针对上述技术问题,本发明提供一种基于D3的知识图谱数据节点渲染方法及系统。
本发明解决上述技术问题的技术方案如下:一种基于D3的知识图谱数据节点渲染方法,包括:
构建一个静态工程并在所述静态工程中引入数字可视化工具D3;
将知识图谱数据节点的2D坐标由JSON格式转换为二进制;
将转换得到的二进制的2D坐标转换为3D坐标;
在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染。
本发明的有益效果是:1.提高知识图谱的展示数据节点的数据量;2.提高D3对CPU、GPU的利用率;3.提高知识图谱在大数据量下的交互流畅性。
在上述技术方案的基础上,本发明还可以做如下改进。
进一步,所述将转换得到的二进制的2D坐标转换为3D坐标,具体包括:
通过在转换得到的二进制的2D坐标中添加Z坐标,将所述2D坐标转换为3D坐标。
进一步,还包括:
在所述静态工程中引入可创建worker线程的Web Worker;
通过创建的worker线程执行D3的计算过程,采用Transferable ArrayBuffer执行D3的数据交换过程。
进一步,还包括:
按照设定的补间策略,处理worker线程在执行计算过程中交互的动画。
进一步,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,具体包括:
创建HTML5 canvas,获取画布canvas的ID,获取基于所述3D坐标的WebGL上下文,编译着色器;
基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。
为实现上述发明目的,本发明还提供一种基于D3的知识图谱数据节点渲染系统,包括:
第一引入模块,用于构建一个静态工程并在所述静态工程中引入数字可视化工具D3;
第一转换模块,用于将知识图谱数据节点的2D坐标由JSON格式转换为二进制;
第二转换模块,用于将转换得到的二进制的2D坐标转换为3D坐标;
渲染模块,用于在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染。
进一步,所述第二转换模块,具体用于:
通过在转换得到的二进制的2D坐标中添加Z坐标,将所述2D坐标转换为3D坐标。
进一步,还包括:
第二引入模块,用于在所述静态工程中引入可创建worker线程的Web Worker;
执行模块,用于通过创建的worker线程执行D3的计算过程,采用TransferableArrayBuffer执行D3的数据交换过程。
进一步,还包括:
补间模块,用于按照设定的补间策略,处理worker线程在执行计算过程中交互的动画。
进一步,所述渲染模块,具体用于:
预备单元,用于创建HTML5 canvas,获取画布canvas的ID,获取基于所述3D坐标的WebGL上下文,编译着色器;
绘制单元,用于基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。
附图说明
图1为本发明实施例提供的一种基于D3的知识图谱数据节点渲染方法的流程图。
具体实施方式
以下结合附图对本发明的原理和特征进行描述,所举实例只用于解释本发明,并非用于限定本发明的范围。
图1为本发明实施例提供的一种基于D3的知识图谱数据节点渲染方法的流程图,如图1所示,该方法包括:
S1、构建一个静态工程并在所述静态工程中引入数字可视化工具D3;
S2、将知识图谱数据节点的2D坐标由JSON格式转换为二进制;
步骤S2中,通过将2D坐标转换为二进制,可以提高与GPU交换数据的效率。
S3、将转换得到的二进制的2D坐标转换为3D坐标;
S4、在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染。
步骤S4中,首先使用<canvas>元素定义绘图区域;然后指定当页面加载完成时,调用main()函数。在main()函数中,通过id找到<canvas>标签;使用getWebGLContext(canvas)来获取WebGL绘图上下文。
本发明的有益效果是:
1.提高知识图谱的展示数据节点的数据量;
2.提高D3对CPU、GPU的利用率;
3.提高知识图谱在大数据量下的交互流畅性。
可选地,在该实施例中,步骤S3,具体包括:
通过在转换得到的二进制的2D坐标中添加Z坐标,将所述2D坐标转换为3D坐标。
可选地,在该实施例中,步骤S4中还包括:
在所述静态工程中引入可创建worker线程的Web Worker;
通过创建的worker线程执行D3的计算过程,采用Transferable ArrayBuffer执行D3的数据交换过程。
具体的,引入Web Workers使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务,从而允许主(通常是UI)线程运行而不被阻塞。
它的作用就是给JS创造多线程运行环境,允许主线程创建worker线程,分配任务给后者,主线程运行的同时worker线程也在运行,相互不干扰,在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行,这样主线程就会变得轻松,不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力,而是浏览器作为宿主环境提供了JS一个多线程运行的环境。
可选地,在该实施例中,该方法还包括:
按照设定的补间策略,处理worker线程在执行计算过程中交互的动画。
可选地,在该实施例中,步骤S4,具体包括:
S4.1、创建HTML5 canvas,获取画布canvas的ID,获取基于所述3D坐标的WebGL上下文,编译着色器;
S4.2、基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。
本发明实施例提供一种基于D3的知识图谱数据节点渲染系统,包括:
第一引入模块,用于构建一个静态工程并在所述静态工程中引入数字可视化工具D3;
第一转换模块,用于将知识图谱数据节点的2D坐标由JSON格式转换为二进制;
第二转换模块,用于将转换得到的二进制的2D坐标转换为3D坐标;
渲染模块,用于在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染。
可选地,在该实施例中,所述第二转换模块,具体用于:
通过在转换得到的二进制的2D坐标中添加Z坐标,将所述2D坐标转换为3D坐标。
可选地,在该实施例中,该系统还包括:
第二引入模块,用于在所述静态工程中引入可创建worker线程的Web Worker;
执行模块,用于通过创建的worker线程执行D3的计算过程,采用TransferableArrayBuffer执行D3的数据交换过程。
可选地,在该实施例中,该系统还包括:
补间模块,用于按照设定的补间策略,处理worker线程在执行计算过程中交互的动画。
可选地,在该实施例中,所述渲染模块,具体用于:
预备单元,用于创建HTML5 canvas,获取画布canvas的ID,获取基于所述3D坐标的WebGL上下文,编译着色器;
绘制单元,用于基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。
经过实际测试,本发明达到了以下应用效果:
1.知识图谱流畅的展示节点可以达到10000+的数据量;
2.知识图谱10000+的数据量时,进行交互,页面的帧数依然能够达到30fps,极大的提高了交互的流畅性;
3.极限情况下,知识图谱可以展示50000个节点,极大的提高了知识图谱的展示上限。
读者应理解,在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不必针对的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外,在不相互矛盾的情况下,本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
所属领域的技术人员可以清楚地了解到,为了描述的方便和简洁,上述描述系统实施例中的模块和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。
作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分,或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到各种等效的修改或替换,这些修改或替换都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以权利要求的保护范围为准。
Claims (5)
1.一种基于D3的知识图谱数据节点渲染方法,其特征在于,包括:
构建一个静态工程并在所述静态工程中引入数字可视化工具D3;
将知识图谱数据节点的2D坐标由JSON格式转换为二进制;
将转换得到的二进制的2D坐标转换为3D坐标;
在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染;
还包括:
在所述静态工程中引入可创建worker线程的Web Worker;
通过创建的worker线程执行D3的计算过程,采用Transferable ArrayBuffer执行D3的数据交换过程;
使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,具体包括:
创建HTML5 canvas,获取画布canvas的ID,获取基于所述3D坐标的WebGL上下文,编译着色器;
基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。
2.根据权利要求1所述的一种基于D3的知识图谱数据节点渲染方法,其特征在于,所述将转换得到的二进制的2D坐标转换为3D坐标,具体包括:
通过在转换得到的二进制的2D坐标中添加Z坐标,将所述2D坐标转换为3D坐标。
3.根据权利要求1所述的一种基于D3的知识图谱数据节点渲染方法,其特征在于,还包括:
按照设定的补间策略,处理worker线程在执行计算过程中交互的动画。
4.一种基于D3的知识图谱数据节点渲染系统,其特征在于,包括:
第一引入模块,用于构建一个静态工程并在所述静态工程中引入数字可视化工具D3;
第一转换模块,用于将知识图谱数据节点的2D坐标由JSON格式转换为二进制;
第二转换模块,用于将转换得到的二进制的2D坐标转换为3D坐标;
渲染模块,用于在所述静态工程中,使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素,完成知识图谱数据节点的渲染;
还包括:
第二引入模块,用于在所述静态工程中引入可创建worker线程的Web Worker;
执行模块,用于通过创建的worker线程执行D3的计算过程,采用TransferableArrayBuffer执行D3的数据交换过程;
所述渲染模块,具体用于:
预备单元,用于创建HTML5 canvas,获取画布canvas的ID,获取基于所述3D坐标的WebGL上下文,编译着色器;
绘制单元,用于基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。
5.根据权利要求4所述的一种基于D3的知识图谱数据节点渲染系统,其特征在于,还包括:
补间模块,用于按照设定的补间策略,处理worker线程在执行计算过程中交互的动画。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010423078.XA CN111598988B (zh) | 2020-05-19 | 2020-05-19 | 一种基于d3的知识图谱数据节点渲染方法及系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010423078.XA CN111598988B (zh) | 2020-05-19 | 2020-05-19 | 一种基于d3的知识图谱数据节点渲染方法及系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111598988A CN111598988A (zh) | 2020-08-28 |
CN111598988B true CN111598988B (zh) | 2022-01-25 |
Family
ID=72187271
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010423078.XA Active CN111598988B (zh) | 2020-05-19 | 2020-05-19 | 一种基于d3的知识图谱数据节点渲染方法及系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111598988B (zh) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112035667B (zh) * | 2020-09-02 | 2023-07-21 | 河南中原消费金融股份有限公司 | 一种知识图谱展示方法、装置及终端设备 |
WO2022104786A1 (zh) * | 2020-11-23 | 2022-05-27 | 深圳晶泰科技有限公司 | 多Web 3D场景离屏渲染方法 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108230433A (zh) * | 2018-02-07 | 2018-06-29 | 中译语通科技股份有限公司 | 3d地图散点数据展示方法及系统、信息数据处理终端 |
CN109815327A (zh) * | 2018-12-07 | 2019-05-28 | 南京中新赛克科技有限责任公司 | 一种基于svg的大数据知识图谱可视化解决方案 |
WO2019238145A1 (zh) * | 2018-06-15 | 2019-12-19 | 搜游网络科技(北京)有限公司 | 一种基于WebGL的图形绘制方法、装置及系统 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10324736B2 (en) * | 2017-01-13 | 2019-06-18 | Zspace, Inc. | Transitioning between 2D and stereoscopic 3D webpage presentation |
-
2020
- 2020-05-19 CN CN202010423078.XA patent/CN111598988B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108230433A (zh) * | 2018-02-07 | 2018-06-29 | 中译语通科技股份有限公司 | 3d地图散点数据展示方法及系统、信息数据处理终端 |
WO2019238145A1 (zh) * | 2018-06-15 | 2019-12-19 | 搜游网络科技(北京)有限公司 | 一种基于WebGL的图形绘制方法、装置及系统 |
CN109815327A (zh) * | 2018-12-07 | 2019-05-28 | 南京中新赛克科技有限责任公司 | 一种基于svg的大数据知识图谱可视化解决方案 |
Also Published As
Publication number | Publication date |
---|---|
CN111598988A (zh) | 2020-08-28 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106997610B (zh) | 一种图像渲染方法、装置及电子设备 | |
CN102122502B (zh) | 一种三维字体显示方法以及相关装置 | |
CN111598988B (zh) | 一种基于d3的知识图谱数据节点渲染方法及系统 | |
CN106251392A (zh) | 用于执行交织的方法和设备 | |
CN106991096B (zh) | 动态页面渲染方法及装置 | |
CN105338358A (zh) | 对图像进行解码的方法及装置 | |
CN103677777B (zh) | 调用应用程序组件的方法及装置 | |
CN113947650B (zh) | 动画处理方法、装置、电子设备及介质 | |
US10496423B2 (en) | Method for opening up data and functions of terminal application based on reconstruction technology | |
CN111798361A (zh) | 渲染方法、装置、电子设备及计算机可读存储介质 | |
CN113204412B (zh) | 用于任务调度的方法、电子设备和计算机存储介质 | |
CN111158840B (zh) | 图像轮播方法及装置 | |
GB2524047A (en) | Improvements in and relating to rendering of graphics on a display device | |
CN110362298B (zh) | 一种基于浏览器的目标对象绘制方法、装置和浏览器 | |
CN111414150B (zh) | 游戏引擎渲染方法、装置、电子设备及计算机存储介质 | |
CN114924712A (zh) | 一种基于域控制器平台的aui模块化实现方法及系统 | |
CN109408059A (zh) | 一种场景生成方法及装置 | |
US20130063482A1 (en) | Application programming interface for a bitmap composition engine | |
CN113792237B (zh) | 卡片式布局的优化方法、装置、存储介质及处理器 | |
GB2476544A (en) | Relational modeling for performance analysis of multi-core processors | |
CN111708519B (zh) | 一种业务组件的处理方法、装置、设备和存储介质 | |
US9811448B2 (en) | Event-driven software testing | |
CN114470767A (zh) | 一种任务处理方法、装置及电子设备 | |
CN104424661A (zh) | 三维对象显示方法和装置 | |
CN114791986A (zh) | 三维信息模型的处理方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |