Graph 是 F6 图表的载体，所有的 F6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。

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

GraphOptions.container

图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。

GraphOptions.width

指定画布宽度，单位为 'px'，默认为画布容器宽度。

GraphOptions.height

指定画布高度，单位为 'px'，默认为画布容器高度。

GraphOptions.fitView

是否开启画布自适应。开启后图自动适配画布大小。

GraphOptions.fitViewPadding

fitView 为 true 时生效。图适应画布时，指定四周的留白。
- 可以是一个值, 例如：fitViewPadding: 20
- 也可以是一个数组，例如：fitViewPadding: [ 20, 40, 50, 20 ]
当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。

GraphOptions.fitCenter

开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。

GraphOptions.linkCenter

指定边是否连入节点的中心。

GraphOptions.groupByTypes

各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。当使用 Combo 时，必须将其设置为 false 。

GraphOptions.autoPaint

当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。

GraphOptions.modes

设置画布的交互模式。详情可见 交互模式 Mode 文档。

GraphOptions.modes.default

画布默认的模式。详情可参见 内置的 Behavior 文档。

GraphOptions.nodeStateStyles

各个状态下节点的样式，例如 hover、selected。

GraphOptions.edgeStateStyles

各个状态下边的样式，例如 hover、selected。

GraphOptions.comboStateStyles

各个状态下 Combo 的样式，例如 hover、selected。

GraphOptions.defaultNode

默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖。 见 节点的通用属性 。

GraphOptions.defaultEdge

默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。 见 边的通用属性 。

GraphOptions.defaultCombo

默认状态下 Combo 的配置，比如 type, color。会被写入的 data 覆盖。见 Combo 的通用属性 。

GraphOptions.plugins

向 graph 注册插件。插件机制请见：插件 。

GraphOptions.animate

是否启用全局动画。

GraphOptions.animateCfg

动画配置项，仅在 animate 为 true 时有效。关于 animateCfg 的更多配置项参见基础动画教程。

GraphOptions.animateCfg.onFrame

回调函数，用于自定义节点运动路径，为空时线性运动。

GraphOptions.animateCfg.duration

动画时长，单位为毫秒。

GraphOptions.animateCfg.easing

动画动效，可参见 d3 ease。

GraphOptions.minZoom

最小缩放比例。

GraphOptions.maxZoom

最大缩放比例。

GraphOptions.layout

布局配置项，使用 type 字段指定使用的布局方式，type 可取以下值：random, radial, mds, circular, fruchterman, force, gForce, forceAtlas2, dagre, concentric, grid。当实例化图时没有配置 layout 时：

• 若数据中节点有位置信息（x 和 y），则按照数据的位置信息进行绘制；
• 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。

每种布局方法的配置项不尽相同，具体参见 Graph 内置布局。

GraphOptions.layout.pipes

流水线子图布局

在 GraphOptions.layout 中可配置 pipes 达到同时对不通过子图使用不同布局的目的。

在实例化图时配置 layout.pipes 数组，指定多个子图布局的布局类型（type）、布局参数、节点过滤函数（nodesFilter）。值得注意的是，若某些节点同时属于不同的子图（即这些节点在不同的子图的 nodesFilter 配置都返回为 true），则这些节点位置的计算将按照 pipes 数组顺序后者覆盖前者。

pipes 的数据类型为：

type Pipes = {
  // 该子图所使用的布局类型
  type:
    | 'random'
    | 'radial'
    | 'mds'
    | 'circular'
    | 'fruchterman'
    | 'force'
    | 'gForce'
    | 'dagre'
    | 'concentric'
    | 'grid'
    | 'forceAtlas2',
  // 节点的筛选器，参数为节点数据，返回布尔值代表该节点是否在该子图中
  nodesFilter: (node: NodeData) => boolean, // 布局对应的参数，详见各个布局的参数
  ...
}[];

使用方法如下：

layout: {
  pipes: [
    {
      // 该子图所使用的布局类型
      type: 'circular',
      // 根据节点的某个字段判断是否属于该子图
      nodesFilter: (node) => node.subGraphId === '1'
    },
    {
      type: 'grid',
      // 该 grid 布局的其他参数
      begin: [100, 0],
      nodesFilter: (node) => node.subGraphId === '2'
    }
  ],
},

GraphOptions.renderer

GraphOptions.enabledStack

是否启用 stack，即是否开启 redo & undo 功能。

GraphOptions.maxStep

redo & undo 最大步数, 只有当 enabledStack 为 true 时才起作用。