vue知识图谱可视化_一个知识图谱展示网站，前端使用vue+D3框架，后端采用springboot框架...

商务智能项目文档

项目架构分析

本项目是一个知识图谱展示网站。

前端使用vue+D3框架实现前端基本逻辑、样式设定以及数据可视化；

后端采用springboot框架，实现分发逻辑、图算法等功能；

数据库方面使用Neo4j存储基本节点及关系数据；使用MongoDB作为检索结果的缓存；使用MySQL存储所有节点名称和其对于的ID、标签。

类图

前端

介绍

在我们的项目中主要使用D3组件来对数据进行展示。D3是一款强大的用于数据可视化的JavaScript库，能够展示多种类型的数据，同时对数据进行操控。

导入

我们使用d3-network来展示网络状的图数据。

import D3Network from 'vue-d3-network'

components: {

D3Network

}

事件

node-click: 单击爱节点时触发事件——(event,node-object)

link-click:单击链接时触发 ——(event, link-object)

节点对象

id：节点ID。如果没有提供使用数组索引

name：节点名称。如果未提供使用：'node [node_id]'

_color：节点颜色，例如红色，＃aa00bb，

_cssClass：node css类名

_labelClass：节点标签css类名

svgSym：节点图标，svg文档(仅适用于svg渲染器)

_size：节点大小*(仅限svg渲染器)*

_width：节点宽度*(仅限svg渲染器)*

_height：节点高度*(仅限svg渲染器)*

_svgAttrs：Object，svg节点属性

由于项目节点属性与该component节点对象属性不太相符，所以需要修改component，

buildNode函数中将项目节点属性提取并填入节点对象属性。

链接对象

id：链接ID。如果没有提供使用数组索引

name：节点名称。如果未提供使用：'link [link_id]'

tid：目标节点的id

sid：源节点的id

_color：链接颜色，例如红色，＃aa00bb，

_svgAttrs：Object，svg行属性

同节点对象一样，由于项目链接属性与该component链接对象属性不太相符，所以修改component中buildLink函数，将项目节点属性提取并填入节点对象属性。

props

该component为我们提供了丰富的属性，以自定义我