# visgraph

**Repository Path**: TianMing_2018/visgraph

## Basic Information

- **Project Name**: visgraph
- **Description**: 基于GraphVis制作的知识图谱可视化vue component。很简陋,还不能称为组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-07-08
- **Last Updated**: 2022-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VisGraph

VisGraph 是知识图谱的前端可视化相关的 demo,项目基于 [GraphVis](https://gitee.com/baopengdu/GraphVis)相关案例,并简单做了个 vue 组件

> 知识图谱 可以参考我收集的 [about](./doc/about.md) 简单了解一下

## 组件功能

基础工具

- [x] 全选/反选
- [x] 隐藏/显示/删除选中
- [x] 显示/删除全部
- [x] 隐藏孤立点
- [x] 清空画布
- [x] 重新加载
- [ ] 展开/收缩子节点

分析

- [x] 列表分析
- [x] 连接分析
- [x] 路径分析
- [x] 最短路径
- [ ] 环路分析
- [x] 查找节点
- [x] 高亮关联节点
- [x] 图信息

视觉调整

- [x] 绘图缩放、重置、左右旋转
- [x] 节点缩放
- [x] 边缩放
- [x] 连接标签隐藏/显示
- [ ] 缩略图
- [ ] 单节点、连接配置
- [x] 布局算法、聚类算法
- [ ] 全局配置编辑、布局/聚类算法交互优化
- [ ] 全局数据筛选

交互部分

- [x] 节点信息、编辑节点、隐藏/删除节点、添加节点
- [x] 编辑连接、隐藏/删除连接、新建连接
- [x] 数据另存为图片、json 文本

### 未排期

#### 界面布局调整

CSS 尚未做优化,界面基本就原生的 element-ui,等基本功能想完、做完了,就复习复习 CSS 再改改吧

#### 聚类算法

聚类算法的应用可以使我们从图上直观地判断数据所属大类,更好的对数据关系进行分析。

#### 布局动画

可以用来调整绘图进度等辅助优化视觉设计,未找到一个合理的切入点

#### 自定义视图

GraphVis 支持业务开发人员自定义开发节点样式及效果，实现个性化的节点定义，满足业务定制化的需求。GraphVis 负责底层事件的管理，自定义开发只关注节点样式效果的实现，GraphVis 为外部提供了 canvas 的上下文环境 context，开发可以使用该对象画出任意想要的效果。
一、如何自定义节点样式？
注：只有最新版本的 GraphVis 核心库才支持自定义开发。
1、为节点提供扩展接口函数 drawNode(ctx); 其中 ctx 为整个绘图上下文环境对象，绘制直接使用 canvas 的 context 提供的原生函数即可绘制任意图像。
2、自定义节点时，必须为节点指定 width、height 属性，否则绘制出的图像事件会存在问题。
3、绘制开始和结束必须使用 context.save() 开始，context.restroe() 结束，否则会影响外部绘制的路径。
4、自定义绘制示例代码：
node.drawNode=function(context){context.save();.....context.restroe();}

用于二次开发,对图关系有大改进需求的可用,我嘛,要啥自行车

## 未来展望

想要做好这个组件,还需要进行更深程度的研究。在我的设想中,可以把它用作一个比思维导图更加灵活的分析工具,边添加边丰富事物关系,激发思考。再做复杂一些,就可以和知识图谱深度结合起来,从数据采集,关系分析等构建一个比较综合的应用,实现一个小型的 信息采集分析系统。

后续可能会用到的 API

- <http://baike.baidu.com/item=xxx>
- <http://shuyantech.com/docuapi>

## 项目启动

```shell
yarn install
yarn serve
```

> 对于前端不太熟悉的朋友可以先参考 [front-vue](https://gitee.com/TianMing_2018/front-vue) 浏览下前端的基本内容。