Loading...
We provide a standalone plugin package @antv/x6-plugin-minimap to use the mini-map feature.
# npm$ npm install @antv/x6-plugin-minimap --save# yarn$ yarn add @antv/x6-plugin-minimap
Then we use it in the code like this:
import { MiniMap } from '@antv/x6-plugin-minimap'const graph = new Graph({background: {color: '#F2F7FA',},})graph.use(new MiniMap({container: document.getElementById('minimap'),}),)
| Property Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
| container | HTMLElement | - | √ | The container to mount the mini-map |
| width | number | 300 | The width of the mini-map | |
| height | number | 200 | The height of the mini-map | |
| padding | number | 10 | The padding margin of the mini-map container | |
| scalable | boolean | true | Whether it is scalable | |
| minScale | number | 0.01 | The minimum scale ratio | |
| maxScale | number | 16 | The maximum scale ratio | |
| graphOptions | Graph.Options | null | Options for creating the mini-map Graph |
