CN111598988A - 一种基于d3的知识图谱数据节点渲染方法及系统 - Google Patents

Abstract

本发明涉及一种基于D3的知识图谱数据节点渲染方法及系统，该方法包括：构建一个静态工程并在所述静态工程中引入数字可视化工具D3；将知识图谱数据节点的2D坐标由JSON格式转换为二进制；将转换得到的二进制的2D坐标转换为3D坐标；在所述静态工程中，使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素，完成知识图谱数据节点的渲染。本发明的有益效果是：1.提高知识图谱的展示数据节点的数据量；2.提高D3对CPU、GPU的利用率；3.提高知识图谱在大数据量下的交互流畅性。

Description

一种基于D3的知识图谱数据节点渲染方法及系统

技术领域

本发明涉及信息技术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 (10)

1.一种基于D3的知识图谱数据节点渲染方法，其特征在于，包括：

构建一个静态工程并在所述静态工程中引入数字可视化工具D3；

将知识图谱数据节点的2D坐标由JSON格式转换为二进制；

将转换得到的二进制的2D坐标转换为3D坐标；

在所述静态工程中，使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素，完成知识图谱数据节点的渲染。

2.根据权利要求1所述的一种基于D3的知识图谱数据节点渲染方法，其特征在于，所述将转换得到的二进制的2D坐标转换为3D坐标，具体包括：

通过在转换得到的二进制的2D坐标中添加Z坐标，将所述2D坐标转换为3D坐标。

3.根据权利要求1所述的一种基于D3的知识图谱数据节点渲染方法，其特征在于，还包括：

在所述静态工程中引入可创建worker线程的Web Worker；

通过创建的worker线程执行D3的计算过程，采用Transferable ArrayBuffer执行D3的数据交换过程。

4.根据权利要求3所述的一种基于D3的知识图谱数据节点渲染方法，其特征在于，还包括：

按照设定的补间策略，处理worker线程在执行计算过程中交互的动画。

5.根据权利要求1至4任一项所述的一种基于D3的知识图谱数据节点渲染方法，其特征在于，使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素，具体包括：

创建HTML5 canvas，获取画布canvas的ID，获取基于所述3D坐标的WebGL上下文，编译着色器；

基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。

6.一种基于D3的知识图谱数据节点渲染系统，其特征在于，包括：

第一引入模块，用于构建一个静态工程并在所述静态工程中引入数字可视化工具D3；

第一转换模块，用于将知识图谱数据节点的2D坐标由JSON格式转换为二进制；

第二转换模块，用于将转换得到的二进制的2D坐标转换为3D坐标；

渲染模块，用于在所述静态工程中，使用D3在Canvas画布中绘制基于所述3D坐标的WebGL元素，完成知识图谱数据节点的渲染。

7.根据权利要求6所述的一种基于D3的知识图谱数据节点渲染系统，其特征在于，所述第二转换模块，具体用于：

通过在转换得到的二进制的2D坐标中添加Z坐标，将所述2D坐标转换为3D坐标。

8.根据权利要求6所述的一种基于D3的知识图谱数据节点渲染系统，其特征在于，还包括：

第二引入模块，用于在所述静态工程中引入可创建worker线程的Web Worker；

执行模块，用于通过创建的worker线程执行D3的计算过程，采用TransferableArrayBuffer执行D3的数据交换过程。

9.根据权利要求8所述的一种基于D3的知识图谱数据节点渲染系统，其特征在于，还包括：

补间模块，用于按照设定的补间策略，处理worker线程在执行计算过程中交互的动画。

10.根据权利要求6至9任一项所述的一种基于D3的知识图谱数据节点渲染系统，其特征在于，所述渲染模块，具体用于：

预备单元，用于创建HTML5 canvas，获取画布canvas的ID，获取基于所述3D坐标的WebGL上下文，编译着色器；

绘制单元，用于基于所述WebGL上下文和着色器在创建的canvas画布中绘制由WebGL元素构成的图形。

Images