在使用g6实现知识图谱可视化中,产品经理提出了有关图谱操作的不少功能,需要放置在工具栏中,其中有些功能不在g6自带的功能里,且工具栏样式、交互效果也和官方自定义工具栏不同。那我们怎么去实现呢?
g6官方的工具栏案例是这样:G6,提供了“重做”,”撤销“,”放大“,”缩小“,”适应屏幕“,”实际大小“的操作,配置项中也提供了有关样式及操作的回调功能,但是,远不能满足我们产品需要的样式及功能。
产品的需求中,工具栏各操作需要有激活和未激活的效果,悬浮的效果等等。操作除了官方工具栏自带的操作,还需”高亮“,”鱼眼放大镜“,”布局“,”下载“,”关系标签显隐“的功能。
那我们就给工具栏换个新包装吧!话不多说,看效果,上代码。
{
graphState.collapse = !graphState.collapse;
}
" />
{
graphState.collapse = !graphState.collapse;
}
" />
多边散列排布(少量数据推荐)
gForce力导向布局
基础力导向布局
Fruchterman布局
上述代码中,我们根据业务需求做了工具栏整体的显示隐藏,展开收起,关系显隐,图片下载等功能。工具栏面板我们可以根据自己系统使用的组件库,ant design 、element ui或者其他。添加图标,提示框,选中等效果。这里不多赘述。
那么,怎么将g6的功能添加到我们工具栏上面使用呢?
我们定义了一组响应式对象,用来存储当前激活的工具或效果。
const graphState = reactive({
layout: {
type: 'force2',
advanceWeight: false,
damping: 0.8,
kr: 1000,
preset: {
minNodeSpacing: 10,
nodeSize: 10,
type: 'concentric',
},
clustering: true,
animate: false,
preventOverlap: true,
clusterNodeStrength: 35,
distanceThresholdMode: 'max',
minMovement: 10,
maxSpeed: 1000,
linkDistance: 50,
edgeStrength: 200,
nodeStrength: 1000,
nodeWeightFieldScale: 1,
nodeWeightFromType: 'node',
fitCenter: true,
},
showTool: false,
activeTool: '', //当前激活的工具
enableFishEye: false, //是否启用鱼眼放大镜
relation: false, //是否开启高亮相邻节点
enableLegend: false, //是否开启图例
relationVisible: true, //关系标签显示隐藏
collapse: false, //展开或折叠工具栏
});
引入G6,定义graph,用来初始化G6实例,再初始化G6的工具栏
import G6 from '@antv/g6';
let graph;
let toolbar = new G6.ToolBar({
className: 'g6-component-toolbar',
});
通过动态的给graph 实例添加插件、添加行为动作,达到调用工具栏功能的目的。
const handleClickTool = code => {
if (toolbar.destroyed) {
toolbar = new G6.ToolBar({
className: 'g6-component-toolbar',
});
graph.addPlugin(toolbar);
}
if (code === 'zoomOut') {
toolbar.zoomOut();
//...
} else if (code === 'zoomIn') {
toolbar.zoomIn();
//...
}
//...
graph.fitCenter();
graphState.activeTool = code;
};
其他功能实现读者可查询G6官网API自行实现。这里只简述思路和原理。