g6/docs/api/Graph.en.md
2020-11-13 22:33:15 +08:00

210 lines
7.4 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: G6.Graph(cfg)
order: 0
redirect_from:
- /en/docs/api
---
Graph is the carrier of G6. All the operations about events, behaviors, items are mounted on the instance of Graph.
```ts
// highlight-start
new 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
<description> _string | HTMLElement_ **required** </description>
The DOM container of graph, it can be the id of a DOM element or the an HTML node.
### GraphOptions.width
<description> _Number_ **required** </description>
The width of the canvas for graph with the unit 'px'.
### GraphOptions.height
<description> _Number_ **required** </description>
The height of the canvas for graph with the unit 'px'.
### GraphOptions.fitView
<description> _Boolean_ **optional** _default:_ `false`</description>
Whether to fit the canvas to the view port.
### GraphOptions.fitViewPadding
<description> _Array | Number_ **optional** _default:_ `0`</description>
Takes effect only when `fitView: true`. It is the padding between canvas and the border of view port.<br />- It can be a value, e.g. `fitViewPadding: 20`, which means the padding to the top, left, right, bottom are the same.<br />- Or an array, e.g. `fitViewPadding: [ 20, 40, 50, 20 ]`, the four values in the array indicate the padding to the top, right, bottom, left respectively.
### GraphOptions.fitCenter
<description> _Boolean_ **optional** _default:_ `false`</description>
_Supported by v3.5.1._ Whether to translate the graph to align its center with the canvas. Its priority is lower than `fitView`.
### GraphOptions.linkCenter
<description> _Boolean_ **optional** _default:_ `false`</description>
Whether to connect the edges to nodes' center.
### GraphOptions.groupByTypes
<description> _Boolean_ **optional** _default:_ `true`</description>
Whether to group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. When you are using Combo, **MUST** set `groupByTypes` to `false`.
### GraphOptions.autoPaint
<description> _Boolean_ **optional** _default:_ `true`</description>
Whether to paint the graph automatically while item updated or view port changed. In order to enhance the performance, we recommend to turn off `antoPaint` when you are doing bulk operation on nodes or edges. This can be refered to [`setAutoPaint()`](#setautopaintauto).
### GraphOptions.modes
<description> _Object_ **optional** _default:_ `{}`</description>
The interaction modes of this graph. Please refer to [Interaction Mode](/en/docs/manual/middle/states/mode) for detail.
#### GraphOptions.modes.default
<description> _Object_ **optional** _default:_ `[]`</description>
The default modes of this graph. Please refer to [Default Behavior](/zh/docs/manual/middle/states/defaultBehavior) for detail.
### GraphOptions.nodeStateStyles
<description> _Object_ **optional** _default:_ `{}`</description>
The node styles on different states, e.g. hover, selected. It is a new feature of G6 3.1.
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Note:</strong></span> If you are using version 3.1 or below, just change `nodeStyle` to `nodeStateStyles` and `edgeStyle` to `edgeStateStyles` and keep the configuration unchanged.
### GraphOptions.edgeStateStyles
<description> _Object_ **optional** _default:_ `{}`</description>
The edge styles on different states, e.g. hover, selected. It is a new feature of G6 3.1.
### GraphOptions.comboStateStyles
<description> _Object_ **optional** _default:_ `{}`</description>
The combo styles on different states, e.g. hover, selected. It is a new feature of G6 3.5.
### GraphOptions.defaultNode
<description> _Object_ **optional** _default:_ `{}`</description>
Default node configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data.
### GraphOptions.defaultEdge
<description> _Object_ **optional** _default:_ `{}`</description>
Default edge configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data.
### GraphOptions.defaultCombo
<description> _Object_ **optional** _default:_ `{}`</description>
Default combo configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data. It is a new feature of G6 3.5.
### GraphOptions.plugins
<description> _Array _ **optional** _default:_ `[]`</description>
Plugins for graph. Please refer to [Plugin](/en/docs/manual/tutorial/plugins##plugin) for detail.
### GraphOptions.animate
<description> _Boolean _ **optional** _default:_ `false`</description>
Wheter activate the global animation. Which will take effect while changing layouts, changing data, and other global operations.
### GraphOptions.animateCfg
<description> _Object_ **optional** _default:_ `{}`</description>
The configurations for global animation. Takes effect only when `animate: true`. For more detail about animateCfg, see [Basic Animation Docs](/en/docs/manual/advanced/animation#animatecfg).
#### GraphOptions.animateCfg.onFrame
<description> _Function_ **optional** _default:_ `null`</description>
The callback function for every frame of animation. The path of custom animation for node can be defined here. The nodes will move linearly when `onFrame` is null.
#### GraphOptions.animateCfg.duration
<description> _Number_ **optional** _default:_ `500`</description>
Duration of animation with unit millisecond.
#### GraphOptions.animateCfg.easing
<description> _string_ **optional** _default:_ `easeLinear`</description>
The easing function name of animation. Please refer to ease in d3.
### GraphOptions.minZoom
<description> _Number_ **optional** _default:_ `0.2`</description>
The minimum zoom ratio.
### GraphOptions.maxZoom
<description> _Number_ **optional** _default:_ `10`</description>
The maximum zoom ratio.
### GraphOptions.layout
<description> _Object_ **optional** _default:_ `{}`</description>
Configurations for layout. The `type` in it is the name of layout method with the options: `'random'`, `'radial'`, `'mds'`, `'circular'`, `'fruchterman'`, `'force'`, `'dagre'`, `'concentric'`, `'grid'`. When `layout` is not assigned on graph:
- If there are `x` and `y` in node data, the graph will render with these information;
- If there is no positions information in node data, the graph will arrange nodes with Random Layout by default.
For more configurations for different layout methods, please refer to [Layout API](/en/docs/api/graphLayout/guide).
### GraphOptions.renderer
<description> _'canvas' / 'svg' _ **optional** _default:_ `'canvas'`</description>
Render the graph with Canvas or SVG. It is supported expecting V3.3.x.
### GraphOptions.enabledStack
<description> _boolean_ **optional** _default:_ `false`</description>
Whether to enable stackthat is, whether to support redo & undo operation. Support by V3.6 and latter versions.
### GraphOptions.maxStep
<description> _number_ **optional** _default:_ `10`</description>
The max step number of redo & undo, works only when the `enabledStack` is `true`. Support by V3.6 and latter versions.