g6的minimap中的配置_g6 核心概念

图

// 创建 G6 图实例

const graph = new G6.Graph({

container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应

// 画布宽高

width: 800,

height: 500,

});

// 读取数据

graph.data(data);

// 渲染图

graph.render();

//监听

graph.on()

Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。

必要配置项

上面代码中实例化 Graph 的部分使用了三个必要的配置项：

container

width、height

常用配置项

使用 canvas 或 svg 渲染

renderer

自适应画布

fitView

fitViewPadding

fitCenter

全局元素配置

defaultNode

defaultEdge

nodeStateStyles

edgeStateStyles

布局相关

layout

交互行为相关

modes

动画相关

animate

animateCfg

插件

plugins

图形

每个图元素由图形(Shape) 组成，且都会有自己的唯一关键图形(keyShape)。

图形 Shape

各图形 Shape 的通用方法

attr(name)

获取实例的属性值。

attr(name, value)

更新实例的单个绘图属性。

attr({...})

批量更新实例绘图属性。

KeyShape

代表元素的图形

group

addGroup(cfgs)

addShape(type, cfgs)

变换

获取当前矩阵：getMatrix()；

设置矩阵：setMatrix(matrix) 或 attr('matrix', matrix)；

重置矩阵：resetMatrix()。

图元素

图的元素(Item)包含图上的节点 Node 、边 Edge 和 Combo 三大类。

样式属性，通过 style 字段对象进行配置，和元素的关键图形相关，例如 fill，stroke。

其他属性，例如 id、type，不能在元素状态改变是进行改变，可通过 graph.updateItem 进行手动更新。

节点

G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect。这些内置节点的默认样式分别如下图所示。

定义方式

// 1

defaultNode: {

type: 'circle',

// 其他配置

}

//2

graph.node((node) => {

return {

id: node.id,

type: 'rect',

style: {

fill: 'blue',

},

};

});

graph.data(data);

graph.render();

//3

const data = {

nodes: [

{

id: 'node_circle',

x: 100,

y: 100,

type: 'circle',

label: 'circle',

},]

}

自定义

G6.registerNode(

'nodeName',

{