Graph - 初始化 - 《蚂蚁金服 G6 API 文档》

初始化
- G6.Graph

初始化

G6.Graph

参数

名称	类型	默认值	描述
container	String	HTMLElement	图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
width	Number	undefined	指定画布宽度，单位为 'px'
height	Number	undefined	指定画布高度，单位为 'px'
renderer	String	canvas	渲染引擎，支持 canvas 和 SVG。
fitView	Boolean	false	是否开启画布自适应。开启后图自动适配画布大小。
fitViewPadding	Array	Number	fitView 为 true 时生效。图适应画布时，指定四周的留白。- 可以是一个值, 例如：fitViewPadding: 20- 也可以是一个数组，例如：fitViewPadding: [ 20, 40, 50, 20 ]当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应上，右，下，左四边的边距。
groupByTypes	Boolean	true	各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。
autoPaint	Boolean	true	当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。
modes	Object		设置画布的模式。详情可见 G6 中的 Mode 文档。
nodeStateStyles	Object	{}	各个状态下节点的样式，例如hover、selected，3.1版本新增。
edgeStateStyles	Object	{}	各个状态下边的样式，例如hover、selected，3.1版本新增。
defaultNode	Object	{}	默认状态下节点的配置，比如 shape, size, color。会被写入的 data 覆盖。
defaultEdge	Object	{}	默认状态下边的配置，比如 shape, size, color。会被写入的 data 覆盖。
plugins	Array	[]	向 graph 注册插件。插件机制请见：plugin
animate	Boolean	false	是否启用全局动画。
animateCfg	Object		动画配置项，仅在 animate 为 true 时有效。
animateCfg.onFrame	Function	null	回调函数，用于自定义节点运动路径，为空时线性运动。
animateCfg.duration	Number	500	动画时长，单位为毫秒。
animateCfg.easing	String	easeLinear	动画动效，可参见d3 ease。
minZoom	Number	0.2	最小缩放比例
maxZoom	Number	10	最大缩放比例
pixelRatio	Number	1.0	像素比率
groupType	String	circle	节点分组类型，支持 circle 和 rect
groupStyle	Object		groupStyle 用于指定分组的样式，详情参看文档
layout	Object		布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 Layout API文档

重点说明: G6 3.1 版本中实例化 Graph 时，新增了 nodeStateStyles及 edgeStateStyles两个配置项，删除了 nodeStyle 和 edgeStyle ，使用 3.1 以下版本的同学，只需要将 nodeStyle 改成 nodeStateStyles ，将 edgeStyle 改成 edgeStateStyles ，配置内容保持不变。

用法

Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。

const graph = new G6.Graph({
  container: '',
  width: 500,
  height: 500,
  modes: {
    default: ['drag-canvas'],
  },
  layout: {
    type: 'radial',
    unitRadius: 50,
    center: [500, 300],
  },
});