简介

plugins.template.maxSpanningForest 是一个 graph 的模板插件，提供了下图展示的一系列效果和功能。深度优先提取图的主干树，并使用 Force Atlas 2 布局算法进行抽取后图的布局。在交互上，添加了以下各类交互，这些都可以通过对这个模版对配置项进行选择是否使用。

最大生成树 plugin.template.maxSpanningForest - 图1

交互

  • 鱼眼放大镜。

  • 鼠标进入节点上高亮该节点。

  • 鼠标移出节点时高亮消失。

  • 鼠标进入边时高亮该边。

  • 鼠标移出边时高亮消失。

  • 鼠标右击节点出现菜单。

  • 根据菜单上的选择提取和高亮相关子图。

  • 滚轮放缩图时，节点上的文字根据长度比例显示/隐藏。

安装

在 HTML 中引用文件：

  1. <script src="https://unpkg.com/@antv/g6/build/plugin.template.maxSpanningForest.js"></script>

或在 npm 中引用：

  1. import '@antv/g6/build/plugin.template.maxSpanningForest';

参数

参数 说明 类型 默认值
fisheye 是否使用 fisheye 放大镜。 number true
interactive 是否开启所有交互。 boolean true
textDisplay 是否使用 plugins.tool.textDisplay 插件 boolean true
nodeStyle 未使用 mapper 映射前的节点样式。 object {
stroke: ‘#696969’,
strokeOpacity: 0.4,
lineWidth: 1
activedNodeStyle 未使用 mapper 映射前的被高亮的节点样式。 object {
stroke: ‘#fff’,
strokeOpacity: 1,
stroke: ‘#6a80aa’,
lineWidth: 20
edgeStyle 未使用 mapper 映射前的边样式。 object {
endArrow: true,
stroke: ‘#4F7DAB’,
strokeOpacity: 0.65
}
activedEdgeStyle 未使用 mapper 映射前的被高亮的边样式。 object {
endArrow: true,
stroke: ‘#4C7295’,
strokeOpacity: 1
}
layoutCfg 布局的配置项。 object {
kr: 120,
kg: 8.0,
prevOverlapping: true,
maxIteration: 1000,
barnesHut: true,
useWorker: true
}
menuCfg 菜单的配置项。 object {
lists: [{
html: ‘来源’,
callBack: ‘showSource’
}, {
html: ‘去向’,
callBack: ‘showTargets’
}, {
html: ‘来源去向’,
callBack: ‘showAll’
}]
}
node_label 节点上文字的内容和样式。 function node_label(model) {
return {
text: model.id,
fill: ‘black’,
stroke: ‘#fff’,
lineWidth: 2.5
};
}

使用

实例化插件对象：

  1. const MaxSpanningForestPlugin = G6.Plugins['template.maxSpanningForest'];
  2. const maxSpanningForest = new MaxSpanningForestPlugin({
  3.     layoutCfg: {
  4.         maxIteration: 600,
  5.         kg: 10,
  6.         prevOverlapping: true
  7.     }
  8. });

在实例化 Graph 时作为插件插入：

  1. const graph = new G6.Graph({
  2.     container: 'mountNode',
  3.     plugins: [ maxSpanningForest ]
  4. });