网状知识图谱组件

安装

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 版（SVG 径向树布局，体积约 200K）和 3d 版（力导向 3D，体积约 2M）。type 仅支持 '2d' | '3d'，默认 '2d'。默认的 index.js 同时包含两个版本，传入 type 即可在组件内部切换。

BREAKING（2d）：2d 视图已从 Canvas 力导向图改为 SVG 径向树。树边按生成树绘制；其余关系作为交叉边以曲线展示。布局不再依赖 d3-force，视觉与交互与旧版 2d 不完全一致。3d 视图行为不变。

2d 布局相关配置：

• rootId：指定根概念 id；未传或 id 不在当前连通分量内时，组件自动选择根节点。
• structuralRelationTypes：关系类型数组（匹配 relationInfo.type 或 relationInfo.relationType）。命中类型的边优先参与生成树。
• isStructural：在单条关系的 relationInfo.isStructural === true 时，该边同样视为结构边（与 structuralRelationTypes 二选一或叠加均可）。

如果只需要 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 | 2d：初次布局后是否自动 zoomToFit 以适应容器（不再表示力导向聚类）。设为 false 时保留 1:1 缩放与默认平移。3d：仍表示初始化时是否聚类 | Boolean | true | | | multiSelect | 多选模式，disable-禁用多选，click-点选，box-框选。默认禁用 | 'disable'、'click'、'box' | | | | enableSelect | 是否允许选择节点和关系 | Boolean | true | | | rootId | 2d：径向树根节点概念 id；不传则自动选择 | string | number | null | null | '1916753422358990848' | | structuralRelationTypes | 2d：视为结构边的关系类型列表（见上文 isStructural） | Array | [] | ['parent-child'] |

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 | 重新计算布局。2d：重新生成径向树并布局；3d：重新力导向聚类。切换学段、学科等需重绘时调用。 | | | updateColor | 3d视图下，当传入的concept或relation的样式改变时，组件内部监听不到其变化，需要调用该方法更新样式。2d视图无需调用 | | | zoomToFit | 对图谱整体进行缩放和平移，使其适应容器 | | | | | |