图配置 F6.Graph(cfg)

阅读时间约 3 分钟

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

string | HTMLElement required

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

GraphOptions.width

Number optional

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

GraphOptions.height

Number optional

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

GraphOptions.fitView

Boolean optional default: false

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

GraphOptions.fitViewPadding

Array | Number optional default: 0

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

GraphOptions.fitCenter

Boolean optional default: false

开启后,图将会被平移,图的中心将对齐到画布中心,但不缩放。优先级低于 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: {}

各个状态下节点的样式,例如 hoverselected

GraphOptions.edgeStateStyles

Object optional default: {}

各个状态下边的样式,例如 hoverselected

GraphOptions.comboStateStyles

Object optional default: {}

各个状态下 Combo 的样式,例如 hoverselected

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 覆盖。见 Combo 的通用属性

GraphOptions.plugins

Array _ optional _default: []

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

GraphOptions.animate

Boolean _ optional _default: false

是否启用全局动画。

GraphOptions.animateCfg

Object optional default: {}

动画配置项,仅在 animatetrue 时有效。关于 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, gForce, forceAtlas2, dagre, concentric, grid。当实例化图时没有配置 layout 时:

  • 若数据中节点有位置信息(xy),则按照数据的位置信息进行绘制;
  • 若数据中节点没有位置信息,则默认使用 Random Layout 进行布局。

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

GraphOptions.layout.pipes

流水线子图布局

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

img

在实例化图时配置 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

'canvas' / 'svg' / 'mini' / 'mini-native' _ optional _default: 'canvas'

GraphOptions.enabledStack

boolean optional default: false

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

GraphOptions.maxStep

number optional default: 10

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