关联网络知识图谱可视化组件和方法技术

本申请提供一种关联网络知识图谱可视化组件和方法，组件包括：React框架、G6可视化库、属性层；属性层，用于存储并传递知识图谱的属性；G6可视化库，用于基于属性层传递的属性，为知识图谱提供图可视化引擎，G6可视化库基于React框架进行封装；React框架，用于为G6可视化库提供开源JavaScript库；JavaScript库用于将数据渲染为超文本标记语言HTML视图。本发明专利技术提供的可视化组件基于React的组件式编程思想和G6可视化引擎技术实现，该组件在可以在任何基于React框架的业务中复用，极大的降低了业务中的接入成本。

【技术实现步骤摘要】
关联网络知识图谱可视化组件和方法
本专利技术涉及图可视化
，尤其涉及一种关联网络知识图谱可视化组件和方法。
技术介绍
G6是一个图可视化引擎，它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。在传统的WEB编程开发方式下，通过G6来实现知识图谱的展示，需要预先设置一个容器ID，在初始化生成一个G6实例之后，所有的操作都要围绕这个共享的实例来展开，开发人员需要手动去处理事件处理逻辑，手动处理数据的添加、删除、更新操作等等。如果业务中多个地方想要复用知识图谱的展示，在传统的开发模式下，只能把包括JS、CSS等整个代码片断复制过去使用，非常的不方便。而且在处理数据更新时，手动处理添加、删除、更新操作，让整个业务逻辑变得更难理解。
技术实现思路
为解决上述问题，本申请实施例提供了一种关联网络知识图谱可视化组件和方法。根据本申请实施例的第一个方面，提供了一种关联网络知识图谱可视化组件，所述组件包括：React框架(101)、G6可视化库(102)、属性层；所述属性层，用于存储并传递知识图谱的属性；所述G6可视化库(102)，用于基于所述属性层传递的属性，为所述知识图谱提供图可视化引擎，所述G6可视化库(102)基于所述React框架(101)进行封装；所述React框架(101)，用于为所述G6可视化库(102)提供开源JavaScript库；所述JavaScript库用于将数据渲染为超文本标记语言HTML视图。可选地，所述属性层位于所述React框架(101)和所述G6可视化库(102)的上层。可选地，所述React框架(101)和G6可视化库(102)位于同一层。可选地，所述属性层包括：数据属性(103)、配置属性(104)、事件绑定属性(105)；所述数据属性(103)，用于存储并传递知识图谱数据；所述配置属性(104)，用于存储并传递知识图谱展示配置项。所述事件绑定属性(105)，用于存储并传递知识图谱交互相关事件。可选地，所述知识图谱数据包括知识图谱的节点数据和关系数据。可选地，所述知识图谱展示配置项包括如下的一种或多种：宽，高，布局方式。根据本申请实施例的第二个方面，提供了一种关联网络知识图谱可视化方法，所述方法应用于上述第一个方面的关联网络知识图谱可视化组件；所述方法，包括：执行React框架(101)封装的G6可视化库(102)，以便基于G6可视化库(102)当前得到的属性，形成可视化的知识图谱；其中，所述G6可视化库(102)当前得到的属性的初始值由属性层传递而来。可选地，所述方法还包括：监控所述G6可视化库(102)得到的属性是否存在更新；若存在更新，则基于更新的属性重新执行React框架(101)封装的G6可视化库(102)。可选地，所述G6可视化库(102)得到的属性以及更新的属性均至少包括知识图谱数据；所述知识图谱数据包括知识图谱的节点数据和关系数据；所述基于更新的属性重新执行React框架(101)封装的G6可视化库(102)，包括：遍历第一数据中的知识图谱数据，形成映射表；所述第一数据为更新的属性；基于第二数据中的知识图谱数据以及映射表，形成更新属性；所述第二数据为上次执行React框架(101)封装的G6可视化库(102)时，所述G6可视化库(102)得到的属性；将所述更新属性作为G6可视化库(102)当前得到的属性，并执行React框架(101)封装的G6可视化库(102)，以便基于G6可视化库(102)当前得到的属性，形成更新的可视化的知识图谱。可选地，所述基于第二数据中的知识图谱数据以及映射表，形成更新属性，包括：对于第二数据中的任一知识图谱数据，将其与当前的映射表进行对比，若其不存在于当前映射表中，则从当前的第三数据中删除所述第二数据中的任一知识图谱数据，所述第三数据的初始值为上次执行React框架(101)封装的G6可视化库(102)时，所述G6可视化库(102)得到的属性；若其存在于所述映射表中，则基于所述第二数据中的任一知识图谱数据更新当前的第三数据，并将所述第二数据中的任一知识图谱数据从当前的映射表中删除；基于当前的第三数据以及当前的映射表，形成更新属性。有益效果如下：本专利技术提供的组件包括：React框架、G6可视化库、属性层；属性层，用于存储并传递知识图谱的属性；G6可视化库，用于基于属性层传递的属性，为知识图谱提供图可视化引擎，G6可视化库基于React框架进行封装；React框架，用于为G6可视化库提供开源JavaScript库；JavaScript库用于将数据渲染为超文本标记语言HTML视图。本专利技术提供的可视化组件基于React的组件式编程思想和G6可视化引擎技术实现，该组件在可以在任何基于React框架的业务中复用，极大的降低了业务中的接入成本。附图说明下面将参照附图描述本申请的具体实施例，其中：图1示出了本申请一实施例提供的一种关联网络知识图谱可视化组件的结构示意图；图2示出了本申请一实施例提供的另一种关联网络知识图谱可视化组件的结构示意图；图3示出了本申请一实施例提供的一种关联网络知识图谱可视化方法的流程示意图。具体实施方式在传统的WEB编程开发方式下，通过G6来实现知识图谱的展示，需要预先设置一个容器id，在初始化生成一个G6实例之后，所有的操作都要围绕这个共享的实例来展开，开发人员需要手动去处理事件处理逻辑，手动处理数据的添加、删除、更新操作等等。基于此，本专利技术提供一种关联网络知识图谱可视化组件，该组件包括：React框架、G6可视化库、属性层；属性层，用于存储并传递知识图谱的属性；G6可视化库，用于基于属性层传递的属性，为知识图谱提供图可视化引擎，G6可视化库基于React框架进行封装；React框架，用于为G6可视化库提供开源JavaScript库；JavaScript库用于将数据渲染为超文本标记语言HTML视图。本专利技术提供的可视化组件基于React的组件式编程思想和G6可视化引擎技术实现，该组件在可以在任何基于React框架的业务中复用，极大的降低了业务中的接入成本。具体的，参见图1，本实施例提供的关联网络知识图谱可视化组件包括：React框架(101)、G6可视化库(102)、属性层。其中，属性层，用于存储并传递知识图谱的属性。G6可视化库(102)，用于基于属性层传递的属性，为知识图谱提供图可视化引擎，G6可视化库(102)基于React框架(101)进行封装。React框架(101)，用于为G6可视化库(102)提供开源JavaScript库。JavaScript库用于将数据渲染为超文本标记语言HTML视图。另外，属性层位于React框架(101)和G6可视化库(102)的上层。Reac本文档来自技高网...

【技术保护点】
1.一种关联网络知识图谱可视化组件，其特征在于，所述组件包括：React框架(101)、G6可视化库(102)、属性层；/n所述属性层，用于存储并传递知识图谱的属性；/n所述G6可视化库(102)，用于基于所述属性层传递的属性，为所述知识图谱提供图可视化引擎，所述G6可视化库(102)基于所述React框架(101)进行封装；/n所述React框架(101)，用于为所述G6可视化库(102)提供开源JavaScript库；所述JavaScript库用于将数据渲染为超文本标记语言HTML视图。/n

【技术特征摘要】
1.一种关联网络知识图谱可视化组件，其特征在于，所述组件包括：React框架(101)、G6可视化库(102)、属性层；
所述属性层，用于存储并传递知识图谱的属性；
所述G6可视化库(102)，用于基于所述属性层传递的属性，为所述知识图谱提供图可视化引擎，所述G6可视化库(102)基于所述React框架(101)进行封装；
所述React框架(101)，用于为所述G6可视化库(102)提供开源JavaScript库；所述JavaScript库用于将数据渲染为超文本标记语言HTML视图。


2.根据权利要求1所述的组件，其特征在于，所述属性层位于所述React框架(101)和所述G6可视化库(102)的上层。


3.根据权利要求2所述的组件，其特征在于，所述React框架(101)和G6可视化库(102)位于同一层。


4.根据权利要求3所述的组件，其特征在于，所述属性层包括：数据属性(103)、配置属性(104)、事件绑定属性(105)；
所述数据属性(103)，用于存储并传递知识图谱数据；
所述配置属性(104)，用于存储并传递知识图谱展示配置项。
所述事件绑定属性(105)，用于存储并传递知识图谱交互相关事件。


5.根据权利要求4所述的组件，其特征在于，所述知识图谱数据包括知识图谱的节点数据和关系数据。


6.根据权利要求4所述的组件，其特征在于，所述知识图谱展示配置项包括如下的一种或多种：宽，高，布局方式。


7.一种关联网络知识图谱可视化方法，其特征在于，所述方法应用于权利要求1-6任一权利要求所述的关联网络知识图谱可视化组件；
所述方法，包括：
执行React框架(101)封装的G6可视化库(102)，以便基于G6可视化库(102)当前得到的属性，形成可视化的知识图...

【专利技术属性】
技术研发人员：徐辉，肖铮，陈树华，
申请(专利权)人：北京顶象技术有限公司，
类型：发明
国别省市：北京;11