CN109815327B - 一种基于svg的大数据知识图谱可视化解决方案 - Google Patents
一种基于svg的大数据知识图谱可视化解决方案 Download PDFInfo
- Publication number
- CN109815327B CN109815327B CN201811492960.9A CN201811492960A CN109815327B CN 109815327 B CN109815327 B CN 109815327B CN 201811492960 A CN201811492960 A CN 201811492960A CN 109815327 B CN109815327 B CN 109815327B
- Authority
- CN
- China
- Prior art keywords
- data
- node
- svg
- edge
- knowledge graph
- 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
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种基于SVG的大数据知识图谱可视化解决方案，采用SVG+Html5+D3.js技术，并将其成功运用在大数据知识图谱可视化中，使得呈现效果更加直观，用户体验感也更好。
Description
技术领域
本发明涉及知识图谱可视化技术领域，具体涉及一种基于SVG的大数据知识图谱可视化解决方案。
背景技术
随着大数据、物联网上升为国家战略，各行各业和大数据的关系日渐密切，数据内容呈现指数式爆炸增长的态势。由于数据的大规模、异质多元、组织结构松散的特点，给人们有效获取信息和知识提出了挑战。因此大数据行业引入了数据可视化和知识图谱(Knowledge Graph)技术。
数据可视化是信息可视化与和科学可视化两大领域的融合。数据可视化不仅能够以图形的形式展示数据内容，也能够通过图形发现数据中隐藏的新的关联信息。数据可视化的优势包括：更快的传递速度，数据的多维显示，更直观的数据结构和关系，更容易帮助人类突破人脑对数据认知的局限性。在大数据分析处理领域，一图胜千字。采用数据可视化技术，可以大大提高数据的分析处理效率。
知识图谱是谷歌首先提出，分为模式层(概念)+数据层(实例)。以rdf三元组＜实体1，关系，实体2>组成。其中模式层也可以称为本体，最基本的本体包括概念、概念层次、属性、属性值类型、关系、关系定义域概念集以及关系值域概念集。知识图谱旨在描述真实世界中存在的各种实体或概念及其关系,其构成一张巨大的语义网络图，节点表示实体或概念，边则由属性或关系构成。以其强大的语义处理能力和开放组织能力，为大数据时代的知识化组织和智能应用奠定了基础。
将数据可视化技术与知识图谱相结合，可以为大数据行业的数据分析处理提供极大的便利。
发明内容
本发明提供了一种基于SVG的大数据知识图谱可视化解决方案，采用SVG+Html5+D3.js技术，将其运用在大数据知识图谱可视化中，使得呈现效果更加直观，使用户可以快速了解分析数据，从而为后续的决策提供有力支撑。
本发明公开了一种基于SVG的大数据知识图谱可视化解决方案，基于SVG以及SVG的JavaScript库D3.js，通过在Web页面中实现力导向布局来描绘知识图谱关系图。
进一步的，本发明包括如下步骤：
S1：将知识图谱中的数据分为节点数据和边数据，每个节点数据和边数据均赋予各自的键值对属性，采用图数据库将节点数据和边数据进行关联；
S2：根据前台页面发起http请求，从图数据库中读取包含节点数据和边数据的JavaScript对象表示法数据，传递至web浏览器；
S3：在网页内添加SVG画布，设置SVG画布的大小；
S4：在SVG画布中设置一个顶级g元素，记做g-total，用于实现关系图的整体缩放和拖拽；
S5：对S2中获得的JavaScript对象表示法数据中的边数据进行分组处理；
S6：初始化D3.js力导向布局，绑定经S5处理过的JavaScript对象表示法数据；
S7：根据力导向布局在g-total中分别添加对应数量的节点容器和边容器以及一个公共模块容器，节点容器记做g-node，边容器记做g-link，并给g-node、g-link绑定相应的力导向布局中的数据；
S8：根据g-node以及g-link上绑定的数据，依次为g-node添加节点元素、节点文字和节点菜单；g-link添加边元素、边文字和边菜单；
S9：依据节点数据、边数据添加图例信息，用于标识节点数据以及边数据所属类型。
进一步的，在查询结果中，通过传入节点id的方式，在前台实现节点及相关节点关系的搜索功能，屏蔽不相关节点和关系。
进一步的，对每个节点绑定菜单，进行相关操作，该相关操作包括显示、隐藏、详情及自定义操作。
进一步的，本发明所述的S5中，根据边数量奇偶性进行平分；若关系数量一样多时，分别设置编号；否则，先对数量少的一组从最大编号值进行逆序编号，对数量多的另一组从编号1一直编号到最大编号，再对剩余关系进行负编号，所有关系的编号序列是对称的。
进一步的，本发明在所述S2中，当前台页面发起http请求，传递相关条件参数，将查询的对象标记为查询主体，根据查询主体的不同，对图数据库返回的JavaScript对象表示法数据进行处理，给查询主体对应的JavaScript对象表示法数据打上中心点标签，在页面显示时采用单独样式以及定位在页面的中心位置。
进一步的，所述S5中，在遍历处理节点数据过程中，依据中心点标签，设置fixed(位置固定)以及x(x轴坐标)，y(y轴坐标)属性，用于固定中心节点有益效果：本发明与现有技术相比，本发明采用SVG+Html5+D3.js技术，将其运用在大数据知识图谱可视化中，使得呈现效果更加直观，使用户可以快速了解分析数据，从而为后续的决策提供有力支撑。
附图说明
图1为本发明方法实现架构图；
图2为本发明方法实现效果图；
图3为本发明方法实现效果图；
图4为本发明方法实现效果图。
具体实施方式
下面结合附图和实施例进一步阐述本发明。
如图1所示的一种基于SVG的大数据知识图谱可视化解决方案，包括如下步骤：
S1：知识图谱中的数据可简单的分为节点数据和边数据两类，每个节点数据和边数据都被赋予各自的键值对属性，采用图数据库将节点数据和边数据进行关联，本实施中使用neo4j；
S2：将节点数据和边数据导入neo4j图数据库中；
S3：前台页面发起http请求，传递相关条件参数，查询的对象标记为查询主体；
S4：从neo4j图数据库中读取包含节点数据和边数据的JavaScript对象表示法数据，通过Java后台对JavaScript对象表示法数据进行处理，给查询主体对应的节点数据打上中心点标签，传递至web浏览器；
S5：利用S4中的JavaScript对象表示法数据绘制知识图谱关系图，现代浏览器都实现了SVG技术，相比于Canvas技术，SVG技术更有利于实现交互，适合知识图谱关系图的前端展示；本实施例采用SVG以及D3.js数据可视化JavaScript库来描绘知识图谱关系图；具体操作如下：
S5-1：在网页内添加SVG画布，设置SVG画布的大小；
S5-2：在SVG画布中设置一个顶级g元素，记做g-total，用于实现关系图的整体缩放和拖拽；
S5-3：对S4中获得的JavaScript对象表示法数据中的边数据进行分组处理，为了使得连接两个节点的边曲线呈现对称，根据边数量奇偶性进行平分，当两个方向的关系数量一样多，直接分别设置编号即可。当两个方向的关系数量不对等时，先对数量少的那组关系从最大编号值进行逆序编号，然后在对另一组数量多的关系从编号1一直编号到最大编号，再对剩余关系进行负编号，所有关系的编号序列是对称的，保证后续SVG绘图时曲线的弯曲程度也是对称的。遍历处理节点数据过程中，依据中心点标签，设置fixed(位置固定)以及x(x轴坐标)，y(y轴坐标)属性，用于固定中心节点。
S5-4：初始化D3.js力导向布局，绑定S5-3中处理过的JavaScript对象表示法数据。
S5-5：根据力导向布局在g-total中分别添加对应数量的节点容器和边容器以及一个公共模块容器，节点容器记做g-node，边容器记做g-link，并给g-node、g-link绑定相应的力导向布局中的数据。
S5-6：根据g-node以及g-link上绑定的数据，依次为g-node添加节点元素、节点文字和节点菜单；g-link添加边元素、边文字和边菜单。
S5-7：依据节点数据和边数据添加图例信息，用于标识节点以及关系所属类型
S5-8：在查询结果中，可以通过传入节点id的方式，在前台实现节点及相关节点关系的搜索功能，屏蔽不相关节点和关系；
S5-9：对每个节点绑定菜单，进行相关操作。
图2主要展示了在节点上定义的操作，包括显示、隐藏、详情以及其他自定义操作，根据不同场景进行配置。
图3和图4展示了精确查询功能，选择某一节点后，查询与该节点相关的节点和边，最后高亮显示这些查询到的节点和边。
Claims (3)
1.一种基于SVG的大数据知识图谱可视化解决方案，其特征在于：基于SVG以及SVG的JavaScript库D3.js，通过在Web页面中实现力导向布局来描绘知识图谱关系图；包括如下步骤：
S1：将知识图谱中的数据分为节点数据和边数据，每个节点数据和边数据均赋予各自的键值对属性，采用图数据库将节点数据和边数据进行关联；
S2：根据前台页面发起http请求，传递相关条件参数，将查询的对象标记为查询主体，从图数据库中读取包含节点数据和边数据的JavaScript对象表示法数据，根据查询主体的不同，对图数据库返回的JavaScript对象表示法数据进行处理，给查询主体对应的JavaScript对象表示法数据打上中心点标签，传递至web浏览器，在页面显示时采用单独样式以及定位在页面的中心位置；
S3：在网页内添加SVG画布，设置SVG画布的大小；
S4：在SVG画布中设置一个顶级g元素，记做g-total，用于实现关系图的整体缩放和拖拽；
S5：对S2中获得的JavaScript对象表示法数据中的边数据进行分组处理；以及遍历处理节点数据，依据中心点标签，设置位置固定以及x轴坐标、y轴坐标属性，用于固定中心点；
其中，分组处理包括：根据边数量奇偶性进行平分；若关系数量一样多时，分别设置编号；否则，先对数量少的一组从最大编号值进行逆序编号，对数量多的另一组从编号1一直编号到最大编号，再对剩余关系进行负编号，所有关系的编号序列是对称的；
S6：初始化D3.js力导向布局，绑定经S5处理过的JavaScript对象表示法数据；
S7：根据力导向布局在g-total中分别添加对应数量的节点容器和边容器以及一个公共模块容器，节点容器记做g-node，边容器记做g-link，并给g-node、g-link绑定相应的力导向布局中的数据；
S8：根据g-node以及g-link上绑定的数据，依次为g-node添加节点元素、节点文字和节点菜单；g-link添加边元素、边文字和边菜单；
S9：依据节点数据、边数据添加图例信息，用于标识节点数据以及边数据所属类型。
2.根据权利要求1所述的一种基于SVG的大数据知识图谱可视化解决方案，其特征在于：在查询结果中，通过传入节点id的方式，在前台实现节点及相关节点关系的搜索功能，屏蔽不相关节点和关系。
3.根据权利要求1所述的一种基于SVG的大数据知识图谱可视化解决方案，其特征在于：对每个节点绑定菜单，进行相关操作，该相关操作包括显示、隐藏、详情及自定义操作。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811492960.9A CN109815327B (zh) | 2018-12-07 | 2018-12-07 | 一种基于svg的大数据知识图谱可视化解决方案 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811492960.9A CN109815327B (zh) | 2018-12-07 | 2018-12-07 | 一种基于svg的大数据知识图谱可视化解决方案 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109815327A CN109815327A (zh) | 2019-05-28 |
| CN109815327B true CN109815327B (zh) | 2023-08-15 |
Family
ID=66602836
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811492960.9A Active CN109815327B (zh) | 2018-12-07 | 2018-12-07 | 一种基于svg的大数据知识图谱可视化解决方案 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109815327B (zh) |
Families Citing this family (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489119B (zh) * | 2019-06-26 | 2022-04-12 | 中电万维信息技术有限责任公司 | 基于图数据库显示查询结果的方法、装置及存储介质 |
| CN110955803A (zh) * | 2019-11-15 | 2020-04-03 | 北京浪潮数据技术有限公司 | 基于图数据库的关系图谱的绘制方法、装置、设备及介质 |
| CN111143638B (zh) * | 2019-12-27 | 2021-03-26 | 佰聆数据股份有限公司 | 应用于群体间数据关系分析的可视化布局方法、系统、存储介质及计算机设备 |
| CN111125347B (zh) * | 2019-12-27 | 2023-10-27 | 山东省计算中心（国家超级计算济南中心） | 一种基于unity3d的知识图谱3D可视化方法 |
| CN111143547B (zh) * | 2019-12-30 | 2020-09-01 | 山东大学 | 一种基于知识图谱的大数据显示方法 |
| CN110807105B (zh) * | 2020-01-07 | 2020-04-10 | 成都数联铭品科技有限公司 | 基于知识图谱的数据保存方法及知识图谱的构建方法 |
| CN111309897A (zh) * | 2020-02-27 | 2020-06-19 | 中诚信征信有限公司 | 一种大数据知识图谱可视化方法及装置 |
| CN111598988B (zh) * | 2020-05-19 | 2022-01-25 | 北京海致星图科技有限公司 | 一种基于d3的知识图谱数据节点渲染方法及系统 |
| CN111596913B (zh) * | 2020-05-22 | 2024-04-30 | 北京达佳互联信息技术有限公司 | 一种可视化组件框架编排方法及装置 |
| CN111966821B (zh) * | 2020-08-26 | 2024-06-04 | 南京柯基数据科技有限公司 | 一种基于力学原理的知识图谱可视化方法 |
| CN112035667B (zh) * | 2020-09-02 | 2023-07-21 | 河南中原消费金融股份有限公司 | 一种知识图谱展示方法、装置及终端设备 |
| CN112000718B (zh) * | 2020-10-28 | 2021-05-18 | 成都数联铭品科技有限公司 | 基于属性布局的知识图谱展示方法及系统、介质、设备 |
| CN112635078A (zh) * | 2020-11-06 | 2021-04-09 | 辽宁工程技术大学 | 一种中医药知识图谱构建与可视化方法 |
| CN113792238A (zh) * | 2021-09-16 | 2021-12-14 | 山石网科通信技术股份有限公司 | Svg图像的处理方法及装置、存储介质和处理器 |
| CN114419197B (zh) * | 2021-12-15 | 2023-03-24 | 北京力控元通科技有限公司 | 一种基于svg的功能定义系统、方法及计算机设备 |
| CN117112807B (zh) * | 2023-10-23 | 2024-01-30 | 浙江大学 | 基于力学模型的知识图谱关联信息焦点可视化方法及系统 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104217038A (zh) * | 2014-09-30 | 2014-12-17 | 中国科学技术大学 | 一种针对财经新闻的知识网络构建方法 |
| CN105205087A (zh) * | 2014-06-30 | 2015-12-30 | 中兴通讯股份有限公司 | 一种对大数据的数据分析结果进行处理的方法和装置 |
| CN105468702A (zh) * | 2015-11-18 | 2016-04-06 | 中国科学院计算机网络信息中心 | 一种大规模rdf数据关联路径发现方法 |
-
2018
- 2018-12-07 CN CN201811492960.9A patent/CN109815327B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105205087A (zh) * | 2014-06-30 | 2015-12-30 | 中兴通讯股份有限公司 | 一种对大数据的数据分析结果进行处理的方法和装置 |
| CN104217038A (zh) * | 2014-09-30 | 2014-12-17 | 中国科学技术大学 | 一种针对财经新闻的知识网络构建方法 |
| CN105468702A (zh) * | 2015-11-18 | 2016-04-06 | 中国科学院计算机网络信息中心 | 一种大规模rdf数据关联路径发现方法 |
Non-Patent Citations (1)
| Title |
|---|
| 使用D3.js 实现知识图谱可视化;谢于中;《https://cloud.tencent.com/developer/news/212291》;20180516;第1-4页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109815327A (zh) | 2019-05-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109815327B (zh) | 一种基于svg的大数据知识图谱可视化解决方案 | |
| Lohmann et al. | Visualizing ontologies with VOWL | |
| US8194075B2 (en) | Method and system for generating and displaying an interactive dynamic list view of multiply connected objects | |
| US10083204B2 (en) | Platform for authoring, storing, and searching workflows | |
| US9734149B2 (en) | Clustering repetitive structure of asynchronous web application content | |
| US20130185622A1 (en) | Methods and systems for handling annotations and using calculation of addresses in tree-based structures | |
| Ghiani et al. | An environment for end-user development of web mashups | |
| CN111444181B (zh) | 知识图谱更新方法、装置及电子设备 | |
| WO2014179634A2 (en) | Hand-drawn sketch recognition | |
| CN110442330A (zh) | 列表组件转换方法、装置、电子设备及存储介质 | |
| CN104331438B (zh) | 对小说网页内容选择性抽取方法和装置 | |
| CN103559194B (zh) | 一种搜索方法、服务器、系统 | |
| CN114896417A (zh) | 一种基于知识图谱构建计算机教育知识图谱的方法 | |
| CN107622080A (zh) | 一种数据处理方法及设备 | |
| CN104090869B (zh) | 一种翻译网络信息的方法及翻译系统 | |
| MX2008003413A (es) | Sobremarcacion de conjunto de instrucciones. | |
| Gahegan et al. | Connecting GEON: Making sense of the myriad resources, researchers and concepts that comprise a geoscience cyberinfrastructure | |
| CN109460227A (zh) | 一种网站前端的开发方法、装置、设备及介质 | |
| CN104156421B (zh) | 页面的展现方法、装置及系统 | |
| CN110321510A (zh) | 页面渲染方法和系统 | |
| Khalili et al. | WYSIWYM–Integrated visualization, exploration and authoring of semantically enriched un-structured content | |
| CN114186155A (zh) | 一种页面渲染方法、装置、电子终端及存储介质 | |
| CN104572874B (zh) | 一种网页信息的抽取方法及装置 | |
| Chen et al. | A visualization method for geographic conceptual modelling | |
| JP2015138541A (ja) | ウェブ・コンテンツ生成システム |
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 |