7.3 KiB
| title | order |
|---|---|
| 图配置 G6.Graph(cfg) | 0 |
Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
// highlight-start
new G6.Graph(cfg: GraphOptions) => Graph
// highlight-end
const graph = new G6.Graph({
container: '',
width: 500,
height: 500,
modes: {
default: ['drag-canvas'],
},
layout: {
type: 'radial',
unitRadius: 50,
center: [500, 300],
},
});
GraphOptions.container
string | HTMLElement required
图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
GraphOptions.width
Number required
指定画布宽度，单位为 'px'。
GraphOptions.height
Number required
指定画布高度，单位为 'px'。
GraphOptions.fitView
Boolean optional default: false
是否开启画布自适应。开启后图自动适配画布大小。
GraphOptions.fitViewPadding
Array | Number optional default: 0
fitView 为 true 时生效。图适应画布时，指定四周的留白。
- 可以是一个值, 例如：fitViewPadding: 20
- 也可以是一个数组，例如：fitViewPadding: [ 20, 40, 50, 20 ]
当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。
GraphOptions.fitCenter
Boolean optional default: false
*v3.5.1 后支持。*开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。
GraphOptions.linkCenter
Boolean optional default: false
指定边是否连入节点的中心。
GraphOptions.groupByTypes
Boolean optional default: true
各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。当使用 Combo 时，必须将其设置为 false 。
GraphOptions.autoPaint
Boolean optional default: true
当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。
GraphOptions.modes
Object optional default: {}
设置画布的交互模式。详情可见 交互模式 Mode 文档。
GraphOptions.modes.default
Object optional default: []
画布默认的模式。详情可参见 内置的 Behavior 文档。
GraphOptions.nodeStateStyles
Object optional default: {}
各个状态下节点的样式，例如 hover、selected，3.1 版本新增。
⚠️ 注意: G6 3.1 版本中实例化 Graph 时，新增了 nodeStateStyles 及 edgeStateStyles 两个配置项，删除了 nodeStyle 和 edgeStyle ，使用 3.1 以下版本的同学，只需要将 nodeStyle 改成 nodeStateStyles ，将 edgeStyle 改成 edgeStateStyles ，配置内容保持不变。
GraphOptions.edgeStateStyles
Object optional default: {}
各个状态下边的样式，例如 hover、selected，3.1 版本新增。
GraphOptions.comboStateStyles
Object optional default: {}
各个状态下 Combo 的样式，例如 hover、selected，3.5 版本新增。
GraphOptions.defaultNode
Object optional default: {}
默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖。 见 节点的通用属性 。
GraphOptions.defaultEdge
Object optional default: {}
默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。 见 边的通用属性 。
GraphOptions.defaultCombo
Object optional default: {}
默认状态下 Combo 的配置，比如 type, color。会被写入的 data 覆盖。3.5 版本新增。 见 Combo 的通用属性 。
GraphOptions.plugins
_Array _ optional default: []
向 graph 注册插件。插件机制请见：插件 。
GraphOptions.animate
_Boolean _ optional default: false
是否启用全局动画。
GraphOptions.animateCfg
Object optional default: {}
动画配置项，仅在 animate 为 true 时有效。关于 animateCfg 的更多配置项参见基础动画教程。
GraphOptions.animateCfg.onFrame
Function optional default: null
回调函数，用于自定义节点运动路径，为空时线性运动。
GraphOptions.animateCfg.duration
Number optional default: 500
动画时长，单位为毫秒。
GraphOptions.animateCfg.easing
string optional default: easeLinear
动画动效，可参见 d3 ease。
GraphOptions.minZoom
Number optional default: 0.2
最小缩放比例。
GraphOptions.maxZoom
Number optional default: 10
最大缩放比例。
GraphOptions.layout
Object optional default: {}
布局配置项，使用 type 字段指定使用的布局方式，type 可取以下值：random, radial, mds, circular, fruchterman, force, dagre, concentric, grid。当实例化图时没有配置 layout 时：
- 若数据中节点有位置信息（
x和y），则按照数据的位置信息进行绘制； - 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。
每种布局方法的配置项不尽相同，具体参见 Graph 内置布局。
GraphOptions.renderer
_'canvas' / 'svg' _ optional default: 'canvas'
渲染方式，该配置项除 V3.3.x 外其他版本均支持。
GraphOptions.enabledStack
boolean optional default: false
是否启用 stack，即是否开启 redo & undo 功能，该配置项 V3.6 及以上版本支持。
GraphOptions.maxStep
number optional default: 10
redo & undo 最大步数, 只有当 enabledStack 为 true 时才起作用，该配置项 V3.6 及以上版本支持。