网状知识图谱组件

安装

vue2.6及以下版本的vue需要额外安装@vue/composition-api

npm install @vue/composition-api -D

vue2.7以及vue3无需额外安装插件，可直接使用

import aicfeConceptGraph from 'aicfe-concept-graph'
import 'aicfe-concept-graph/dist/index.css' // 引入样式文件

说明

图谱分为2d版（体积约200K）和3d版（体积约2M），默认的index.js文件同时包含了两个版本，传入type参数即可在组件内部切换版本。

如果只需要2d或3d，可以只引入graph2D.js或graph3D.js，从而减少包体积。二者的参数、事件等完全相同

import aicfeConceptGraph from 'aicfe-concept-graph/dist/graph2D.js' // 只引入2d
import aicfeConceptGraph from 'aicfe-concept-graph/dist/graph3D.js' // 只引入3d
import 'aicfe-concept-graph/dist/index.css' // 引入样式文件（不论2d还是3d，都需要引入样式文件）

props

| 属性名 | 说明 | 类型 | 默认值 | 示例 | | --------------- | ------------------------------------------------------------ | ------------------------- | ------ | --------------------------------------- | | type | 图表类型，2d或3d。默认2d | '2d'、'3d' | 2d | 2d | | concepts | 概念。支持在concept里传入fillColor、conceptShape、conceptSize、textColor、textSize来自定义概念的样式如果concept中传入了hoverLabel，则鼠标悬浮时会显示hoverLabel中的内容（支持纯文本、html字符串） | Array | [] | | | relations | 关系。支持在relation里传入lineColor、lineWidth来自定义关系的样式如果relation中传入了hoverLabel，则鼠标悬浮时会显示hoverLabel中的内容（支持纯文本、html字符串） | Array | [] | | | styles | 概念和关系的样式。 | Array | [] | | | conceptMenu | 右键点击概念时，展示的菜单项。如果要禁用菜单，不传即可 | Array | [] | [{text: '编辑概念', command: 'edit'}] | | relationMenu | 右键点击关系时，展示的菜单项。如果要禁用菜单，不传即可 | Array | [] | [{text: '编辑关系', command: 'edit'}] | | ctrlSelectMenu | 按住ctrl选中两个节点时，展示的菜单项。如果要禁用菜单，不传即可 | Array | [] | [{text: '编辑关系', command: 'edit'}] | | showStyleManage | 是否显示样式管理的按钮 | Boolean | true | | | showScale | 是否显示当前缩放比例 | Boolean | true | | | clusterOnInit | 在初始化时，是否需要聚类。当节点较少，或者是图的容器较小时，聚类会导致节点之间间隔过大，不便于查看 | Boolean | true | | | multiSelect | 多选模式，disable-禁用多选，click-点选，box-框选。默认禁用 | 'disable'、'click'、'box' | | | | enableSelect | 是否允许选择节点和关系 | Boolean | true | |

events

| 事件名 | 说明 | 回调参数 | | ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | conceptClick | 点击概念时的回调 | 选中的概念 | | conceptEnter | 鼠标进入概念时的回调 | 鼠标进入的概念 | | conceptLeave | 鼠标离开概念时的回调 | 鼠标离开的概念 | | relationClick | 点击关系时的回调 | 选中的概念 | | relationEnter | 鼠标进入关系时的回调 | 鼠标进入的关系 | | relationLeave | 鼠标离开概念时的回调 | 鼠标离开的概念 | | conceptMenuClick | 右键点击概念时，会出现菜单，点击菜单项后的回调 | {command：菜单项对应的command,concept:选中的概念 } | | relationMenuClick | 右键点击概念时，会出现菜单，点击菜单项后的回调 | {command：菜单项对应的command,relation: 选中的关系} | | ctrlSelectMenuClick | 按住ctrl选中两个节点时，会出现菜单，点击菜单项后的回调 | {command：菜单项对应的commandsource:选中的第一个概念target：选中的第二个概念} | | select | 多选模式下，选中概念和关系时的回调。点选模式下，每点一次回调一次。框选模式下，选择结束后触发回调 | { concepts, relations } | | styleManageClick | 点击样式管理按钮时触发的回调 | | | load | 图谱节点和边都加载完毕并且位置稳定时的回调 | |

method 组件暴露的方法

| 方法 | 说明 | 参数 | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | focusNode(conceptId, options: {zoom, triggerClickEvent, transition}) | 传入概念id，将对应的概念平移到正中间，并选中此概念。 | conceptId: 需要聚焦的概念idoptions: 配置对象，有下列几个属性options.zoom: Boolean，是否需要缩放，默认trueoptions.triggerClickEvent:选中概念后，是否需要触发点击事件.默认trueoptions.transition: 过渡时长，单位是ms，如果传入0表示画布立即移动到指定位置。默认0 | | changeSelect({concepts, relations}) | 选中传入的概念和关系 | | | reLayout | 对概念进行重新排列，对其进行聚类。当切换学段，学科需要重新渲染图的时候调用。 | | | updateColor | 3d视图下，当传入的concept或relation的样式改变时，组件内部监听不到其变化，需要调用该方法更新样式。2d视图无需调用 | | | zoomToFit | 对图谱整体进行缩放和平移，使其适应容器 | | | | | |