小地图 Minimap

概述

Minimap（小地图）的主要作用是为用户提供以缩略图形式展示当前图内容的整体布局，可以快速定位图操作位置。

⚠️ 需要注意，Minimap 插件当前不兼容 React Node 渲染机制，在需要使用 Minimap 功能的场景中，建议通过内置节点或者自定义节点实现节点渲染。

使用场景

Minimap（小地图）插件主要适用于以下场景：

提供全局视野，快速定位区域
导航与交互辅助，通过操作小地图可以快速定位到目标位置

基本用法

以下是一个简单的 Minimap 插件初始化示例：

const graph = new Graph({
  plugins: [
    {
      key: 'minimap',
      type: 'minimap',
      size: [240, 160],
    },
  ],
});

在线体验

minimap.md

createGraph(
  {
    data: {
      nodes: Array.from({ length: 50 }).map((_, i) => ({
        id: `node-${i}`,
        x: Math.random() * 500,
        y: Math.random() * 300,
      })),
      edges: Array.from({ length: 100 }).map((_, i) => ({
        id: `edge-${i}`,
        source: `node-${Math.floor(Math.random() * 50)}`,
        target: `node-${Math.floor(Math.random() * 50)}`,
      })),
    },
    node: { style: { fill: '#7e3feb' } },
    edge: { style: { stroke: '#8b9baf' } },
    layout: { type: 'force' },
    behaviors: ['drag-canvas'],
    plugins: [{ type: 'minimap', key: 'minimap', size: [240, 160], position: 'right-bottom' }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      type: 'minimap',
      width: 240,
      height: 160,
      shape: 'key',
      padding: 10,
      position: 'right-bottom',
      maskStyleBorder: '1px solid #ddd',
      maskStyleBackground: 'rgba(0, 0, 0, 0.1)',
      containerStyleBorder: '1px solid #ddd',
      containerStyleBackground: '#fff',
      delay: 128,
    };
    const optionFolder = gui.addFolder('Minimap Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder
      .add(options, 'width', 100, 500, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          size: [value, options.height],
        });
        graph.render();
      });
    optionFolder
      .add(options, 'height', 100, 500, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          size: [options.width, value],
        });
        graph.render();
      });
    optionFolder
      .add(options, 'shape', ['key'])
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          shape: value,
        });
        graph.render();
      });
    optionFolder
      .add(options, 'padding', 0, 50, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          padding: value,
        });
        graph.render();
      });
    optionFolder
      .add(options, 'position', ['right-bottom', 'left-bottom', 'right-top', 'left-top'])
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          position: value,
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'maskStyleBorder')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          maskStyle: { ...options.maskStyle, border: value },
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'maskStyleBackground')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          maskStyle: { ...options.maskStyle, background: value },
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'containerStyleBorder')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          containerStyle: { ...options.containerStyle, border: value },
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'containerStyleBackground')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          containerStyle: { ...options.containerStyle, background: value },
        });
        graph.render();
      });
    optionFolder
      .add(options, 'delay', 0, 500, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          delay: value,
        });
        graph.render();
      });

    // Update the maskStyle and containerStyle in the options object
    Object.defineProperty(options, 'maskStyle', {
      get: () => ({
        border: options.maskStyleBorder,
        background: options.maskStyleBackground,
      }),
      set: (value) => {
        options.maskStyleBorder = value.border;
        options.maskStyleBackground = value.background;
      },
    });

    Object.defineProperty(options, 'containerStyle', {
      get: () => ({
        border: options.containerStyleBorder,
        background: options.containerStyleBackground,
      }),
      set: (value) => {
        options.containerStyleBorder = value.border;
        options.containerStyleBackground = value.background;
      },
    });
  },
);

配置项

属性	描述	类型	默认值	必选
type	插件类型	string	`minimap`	✓
key	插件唯一标识符，用于后续更新	string	-
className	缩略图画布类名，传入外置容器时不生效	string
container	缩略图挂载的容器，无则挂载到 Graph 所在容器	HTMLElement \| string
containerStyle	缩略图的容器样式，传入外置容器时不生效	Partial<CSSStyleDeclaration>
delay	延迟更新时间(毫秒)，用于性能优化	number	128
filter	过滤器，用于过滤不必显示的元素	(id: string, elementType: `node` \| `edge` \| `combo`) => boolean
maskStyle	遮罩的样式	Partial<CSSStyleDeclaration>
padding	内边距	number \| number[]	10
position	缩略图相对于画布的位置	[number, number] \| `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` \| `center`	`right-bottom`
renderer	渲染器，默认使用 Canvas 渲染器	IRenderer
shape	元素缩略图形的生成方法	`key` \| ((id: string, elementType: `node` \| `edge` \| `combo`) => DisplayObject)	`key`
size	宽度和高度	[number, number]	[240, 160]

containerStyle

设置缩略图的容器样式，传入外置容器时不生效。继承了所有 CSS 样式属性（CSSStyleDeclaration），你可以使用任何合法的 CSS 属性来配置缩略图容器的样式。

以下是一些常用配置：

属性	描述	类型	默认值	必选
border	容器边框样式	string	`1px solid #ddd`	✓
background	容器背景颜色	string	`#fff`	✓
borderRadius	容器圆角大小	string	-
boxShadow	容器阴影效果	string	-
padding	容器内边距	string	-
margin	容器外边距	string	-
opacity	透明度	string	-

maskStyle

指定遮罩的样式。继承了所有 CSS 样式属性（CSSStyleDeclaration），你可以使用任何合法的 CSS 属性来配置缩略图容器的样式。

以下是一些常用配置：

属性	描述	类型	默认值	必选
border	容器边框样式	string	`1px solid #ddd`	✓
background	容器背景颜色	string	`rgba(0, 0, 0, 0.1)`	✓
borderRadius	容器圆角大小	string	-	-
boxShadow	容器阴影效果	string	-	-
padding	容器内边距	string	-	-
margin	容器外边距	string	-	-
opacity	透明度	string	-	-

position

缩略图相对于画布的位置，缩略图位置配置支持数组形式和预设值形式。

数组形式 [number, number] 表示相对位置，取值范围为 0~1。举例：[0, 0] 代表画布左上角，[1, 1] 代表画布右下角。
预设值形式用于设定缩略图所在画布固定方位，可选值有：left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | center

const graph = new Graph({
  plugins:[
    {
      ... // 其他配置
      key: 'minimap',
      type: 'minimap',
      position: 'right-bottom'  // 这里进行修改minimap所在位置
    }
  ]
})

效果如下：

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  data: {
    nodes: Array.from({ length: 50 }).map((_, i) => ({
      id: `node-${i}`,
      x: Math.random() * 500,
      y: Math.random() * 300,
    })),
    edges: Array.from({ length: 100 }).map((_, i) => ({
      id: `edge-${i}`,
      source: `node-${Math.floor(Math.random() * 50)}`,
      target: `node-${Math.floor(Math.random() * 50)}`,
    })),
  },
  node: { style: { fill: '#7e3feb' } },
  edge: { style: { stroke: '#8b9baf' } },
  layout: { type: 'force' },
  behaviors: ['drag-canvas'],
  plugins: [{ type: 'minimap', key: 'minimap', size: [240, 160], position: 'right-bottom' }],
});

graph.render();

size

设置小地图的宽度和高度，默认值为 [240, 160]

const graph = new Graph({
  plugins:[
    {
      ... // 其他配置
      key: 'minimap',
      type: 'minimap',
      size: [200, 120]  // minimap的宽度和高度的设置
    }
  ]
})

效果如下：

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  data: {
    nodes: Array.from({ length: 50 }).map((_, i) => ({
      id: `node-${i}`,
      x: Math.random() * 500,
      y: Math.random() * 300,
    })),
    edges: Array.from({ length: 100 }).map((_, i) => ({
      id: `edge-${i}`,
      source: `node-${Math.floor(Math.random() * 50)}`,
      target: `node-${Math.floor(Math.random() * 50)}`,
    })),
  },
  node: { style: { fill: '#7e3feb' } },
  edge: { style: { stroke: '#8b9baf' } },
  layout: { type: 'force' },
  behaviors: ['drag-canvas'],
  plugins: [{ type: 'minimap', key: 'minimap', size: [200, 120], position: 'right-bottom' }],
});

graph.render();

实际案例

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  plugins: [
    {
      type: 'minimap',
      size: [240, 160],
    },
  ],
  node: {
    palette: 'spectral',
  },
  layout: {
    type: 'circular',
  },
  autoFit: 'view',
});

graph.render();

概述

Minimap（小地图）的主要作用是为用户提供以缩略图形式展示当前图内容的整体布局，可以快速定位图操作位置。

⚠️ 需要注意，Minimap 插件当前不兼容 React Node 渲染机制，在需要使用 Minimap 功能的场景中，建议通过内置节点或者自定义节点实现节点渲染。

使用场景

Minimap（小地图）插件主要适用于以下场景：

提供全局视野，快速定位区域
导航与交互辅助，通过操作小地图可以快速定位到目标位置

基本用法

以下是一个简单的 Minimap 插件初始化示例：

const graph = new Graph({
  plugins: [
    {
      key: 'minimap',
      type: 'minimap',
      size: [240, 160],
    },
  ],
});

在线体验

minimap.md

createGraph(
  {
    data: {
      nodes: Array.from({ length: 50 }).map((_, i) => ({
        id: `node-${i}`,
        x: Math.random() * 500,
        y: Math.random() * 300,
      })),
      edges: Array.from({ length: 100 }).map((_, i) => ({
        id: `edge-${i}`,
        source: `node-${Math.floor(Math.random() * 50)}`,
        target: `node-${Math.floor(Math.random() * 50)}`,
      })),
    },
    node: { style: { fill: '#7e3feb' } },
    edge: { style: { stroke: '#8b9baf' } },
    layout: { type: 'force' },
    behaviors: ['drag-canvas'],
    plugins: [{ type: 'minimap', key: 'minimap', size: [240, 160], position: 'right-bottom' }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      type: 'minimap',
      width: 240,
      height: 160,
      shape: 'key',
      padding: 10,
      position: 'right-bottom',
      maskStyleBorder: '1px solid #ddd',
      maskStyleBackground: 'rgba(0, 0, 0, 0.1)',
      containerStyleBorder: '1px solid #ddd',
      containerStyleBackground: '#fff',
      delay: 128,
    };
    const optionFolder = gui.addFolder('Minimap Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder
      .add(options, 'width', 100, 500, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          size: [value, options.height],
        });
        graph.render();
      });
    optionFolder
      .add(options, 'height', 100, 500, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          size: [options.width, value],
        });
        graph.render();
      });
    optionFolder
      .add(options, 'shape', ['key'])
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          shape: value,
        });
        graph.render();
      });
    optionFolder
      .add(options, 'padding', 0, 50, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          padding: value,
        });
        graph.render();
      });
    optionFolder
      .add(options, 'position', ['right-bottom', 'left-bottom', 'right-top', 'left-top'])
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          position: value,
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'maskStyleBorder')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          maskStyle: { ...options.maskStyle, border: value },
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'maskStyleBackground')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          maskStyle: { ...options.maskStyle, background: value },
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'containerStyleBorder')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          containerStyle: { ...options.containerStyle, border: value },
        });
        graph.render();
      });
    optionFolder
      .addColor(options, 'containerStyleBackground')
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          containerStyle: { ...options.containerStyle, background: value },
        });
        graph.render();
      });
    optionFolder
      .add(options, 'delay', 0, 500, 1)
      .listen()
      .onChange((value) => {
        graph.updatePlugin({
          key: 'minimap',
          delay: value,
        });
        graph.render();
      });

    // Update the maskStyle and containerStyle in the options object
    Object.defineProperty(options, 'maskStyle', {
      get: () => ({
        border: options.maskStyleBorder,
        background: options.maskStyleBackground,
      }),
      set: (value) => {
        options.maskStyleBorder = value.border;
        options.maskStyleBackground = value.background;
      },
    });

    Object.defineProperty(options, 'containerStyle', {
      get: () => ({
        border: options.containerStyleBorder,
        background: options.containerStyleBackground,
      }),
      set: (value) => {
        options.containerStyleBorder = value.border;
        options.containerStyleBackground = value.background;
      },
    });
  },
);

配置项

属性	描述	类型	默认值	必选
type	插件类型	string	`minimap`	✓
key	插件唯一标识符，用于后续更新	string	-
className	缩略图画布类名，传入外置容器时不生效	string
container	缩略图挂载的容器，无则挂载到 Graph 所在容器	HTMLElement \| string
containerStyle	缩略图的容器样式，传入外置容器时不生效	Partial<CSSStyleDeclaration>
delay	延迟更新时间(毫秒)，用于性能优化	number	128
filter	过滤器，用于过滤不必显示的元素	(id: string, elementType: `node` \| `edge` \| `combo`) => boolean
maskStyle	遮罩的样式	Partial<CSSStyleDeclaration>
padding	内边距	number \| number[]	10
position	缩略图相对于画布的位置	[number, number] \| `left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` \| `center`	`right-bottom`
renderer	渲染器，默认使用 Canvas 渲染器	IRenderer
shape	元素缩略图形的生成方法	`key` \| ((id: string, elementType: `node` \| `edge` \| `combo`) => DisplayObject)	`key`
size	宽度和高度	[number, number]	[240, 160]

containerStyle

以下是一些常用配置：

属性	描述	类型	默认值	必选
border	容器边框样式	string	`1px solid #ddd`	✓
background	容器背景颜色	string	`#fff`	✓
borderRadius	容器圆角大小	string	-
boxShadow	容器阴影效果	string	-
padding	容器内边距	string	-
margin	容器外边距	string	-
opacity	透明度	string	-

maskStyle

指定遮罩的样式。继承了所有 CSS 样式属性（CSSStyleDeclaration），你可以使用任何合法的 CSS 属性来配置缩略图容器的样式。

以下是一些常用配置：

属性	描述	类型	默认值	必选
border	容器边框样式	string	`1px solid #ddd`	✓
background	容器背景颜色	string	`rgba(0, 0, 0, 0.1)`	✓
borderRadius	容器圆角大小	string	-	-
boxShadow	容器阴影效果	string	-	-
padding	容器内边距	string	-	-
margin	容器外边距	string	-	-
opacity	透明度	string	-	-

position

缩略图相对于画布的位置，缩略图位置配置支持数组形式和预设值形式。

数组形式 [number, number] 表示相对位置，取值范围为 0~1。举例：[0, 0] 代表画布左上角，[1, 1] 代表画布右下角。
预设值形式用于设定缩略图所在画布固定方位，可选值有：left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | center

const graph = new Graph({
  plugins:[
    {
      ... // 其他配置
      key: 'minimap',
      type: 'minimap',
      position: 'right-bottom'  // 这里进行修改minimap所在位置
    }
  ]
})

效果如下：

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  data: {
    nodes: Array.from({ length: 50 }).map((_, i) => ({
      id: `node-${i}`,
      x: Math.random() * 500,
      y: Math.random() * 300,
    })),
    edges: Array.from({ length: 100 }).map((_, i) => ({
      id: `edge-${i}`,
      source: `node-${Math.floor(Math.random() * 50)}`,
      target: `node-${Math.floor(Math.random() * 50)}`,
    })),
  },
  node: { style: { fill: '#7e3feb' } },
  edge: { style: { stroke: '#8b9baf' } },
  layout: { type: 'force' },
  behaviors: ['drag-canvas'],
  plugins: [{ type: 'minimap', key: 'minimap', size: [240, 160], position: 'right-bottom' }],
});

graph.render();

size

设置小地图的宽度和高度，默认值为 [240, 160]

const graph = new Graph({
  plugins:[
    {
      ... // 其他配置
      key: 'minimap',
      type: 'minimap',
      size: [200, 120]  // minimap的宽度和高度的设置
    }
  ]
})

效果如下：

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  data: {
    nodes: Array.from({ length: 50 }).map((_, i) => ({
      id: `node-${i}`,
      x: Math.random() * 500,
      y: Math.random() * 300,
    })),
    edges: Array.from({ length: 100 }).map((_, i) => ({
      id: `edge-${i}`,
      source: `node-${Math.floor(Math.random() * 50)}`,
      target: `node-${Math.floor(Math.random() * 50)}`,
    })),
  },
  node: { style: { fill: '#7e3feb' } },
  edge: { style: { stroke: '#8b9baf' } },
  layout: { type: 'force' },
  behaviors: ['drag-canvas'],
  plugins: [{ type: 'minimap', key: 'minimap', size: [200, 120], position: 'right-bottom' }],
});

graph.render();

实际案例

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  plugins: [
    {
      type: 'minimap',
      size: [240, 160],
    },
  ],
  node: {
    palette: 'spectral',
  },
  layout: {
    type: 'circular',
  },
  autoFit: 'view',
});

graph.render();

G6

小地图 Minimap

G6

小地图 Minimap

概述

使用场景

基本用法

在线体验

配置项

containerStyle

maskStyle

position

size

实际案例

概述

使用场景

基本用法

在线体验

配置项

containerStyle

maskStyle

position

size

实际案例