G6 支持用户注册插件。G6 有默认支持的插件,用户也可遵循 G6 约定实现自己的插件,欢迎开发者在 GitHub 给我们提 pr,共同丰富插件库。

Minimap 缩略图

安装

const Minimap = require('@antv/g6/build/minimap');


<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/minimap.js"></script>


初始化

const minimap = new Minimap({ ...cfgs });

const graph = new G6.Graph({
	plugins: [ minimap ],
  ...cfgs
});


配置项

配置项

类型

默认值

描述

size

Array

[200, 120]

指定 minimap 长宽。建议与主图的尺寸等比例,避免缩略图走样。

container

DOM|String

null

缩略图容器 dom, 或 dom id

className

String

g6-minimap

缩略图最外层dom 的 class, 用于指定缩略图位置,样式等。

viewportClassName

String

g6-minimap-viewport

缩略图窗口的 class, 用于指定视窗样式

type

String

default

缩略图视图类型,详情请见:关于type

delegateStyle

Object

{ fill: '#40a9ff',       stroke: '#096dd9' }

节点占位 Shape 的样式

关于 type

在图的结构比较简单的情况下,默认情况的缩略图能展示图中所有元素的小图。但是也有一些情况下,展示图中所有元素并不是一个好的选择。因此缩略图提供了三种缩略图类型,在初始化实例时,用type来指定。

屏幕快照 2019-03-26 下午5.21.36.png


keyShape 在自定节点时的 draw 方法中返回的图形对象,用于确定节点的尺寸 BBox(x,y,width,height) ,来计算与边的交点等。keyShape 应是节点中的一个原子图形,而不是一个 group。

例如下图: 主图中的每个节点包含一个圆形和一段文本。但是在缩略图上其实展示这些文字根本看不清没有任何意义。

屏幕快照 2019-03-26 下午5.29.19.png


屏幕快照 2019-03-26 下午5.46.42.png


Grid 网格背景


time.gif

安装

const Minimap = require('@antv/g6/build/grid');


<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/grid.js"></script>


初始化

const minimap = new Grid();

const graph = new G6.Graph({
	plugins: [ minimap ],
  ...cfgs
});