g6/packages/site/docs/manual/customize/overview.zh.md
Aaron e08c299a69
docs: update v5 site docs (#5162)
* docs: remove readme and navigation in site

* docs: remove v4 core concept docs

* docs: update history and lod plugin docs

* chore: update dumirc config

* docs: add api shape overview doc

* docs: update manual docs

* docs: update manual and tutorial docs

* chore: update dumirc

* docs: remove design sector

* docs: update docs meta data

* docs: update api docs
2023-11-20 09:50:36 +08:00

17 KiB
Raw Blame History

title order
概述 0

G6 提供了自由的扩展机制,除了 Graph 本身以外,其他能力都是 G6 的“扩展Extensions”。G6 5.0 的扩展分类为:

  • 节点
  • combo
  • 数据转换器
  • 交互
  • 布局算法
  • 插件
  • 主题

为了减少包体积G6 5.0 采用了按需加载的方式,只有在使用到某个扩展时才会引入对应的代码,以引入节点扩展为例:

import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';

/**
 * 扩展 Graph注册需要使用的内置功能第二个参数是注册表
 */
const Graph = extend(BaseGraph, {
  nodes: {
    'custom-node': Extensions.RectNode,
  },
});

// 使用扩展后的类进行实例化
const graph = new Graph({
  node: {
    type: 'custom-edge',
  },
});

:::warning{title=注意} 除了默认注册的扩展,其他扩展都需要通过 extend 方法注册到 Graph 上后才能使用 :::

内置的扩展

1. 节点nodes

type 名称 引入方式 是否默认注册 Demo 注释
'circle-node' Extensions.CircleNode DEMO
'rect-node' Extensions.RectNode 矩形 DEMO圆角矩形 DEMO
'image-node' Extensions.ImageNode DEMO
'donut-node' Extensions.DonutNode DEMO
'diamond-node' Extensions.DiamondNode DEMO
'hexagon-node' Extensions.HexagonNode DEMO
'star-node' Extensions.StarNode DEMO
'triangle-node' Extensions.TriangleNode DEMO
'ellipse-node' Extensions.EllipseNode DEMO
'modelRect-node' Extensions.ModelRectNode DEMO
'sphere-node' Extensions.SphereNode DEMO 仅在 renderer: 'webgl-3d' 时可使用
'cube-node' Extensions.CubeNode DEMO 仅在 renderer: 'webgl-3d' 时可使用

2. 边edges

type 名称 引入方式 是否默认注册 Demo 注释
'line-edge' Extensions.LineEdge DEMO
'loop-edge' Extensions.LineEdge DEMO
'quadratic-edge' Extensions.QuadraticEdge DEMO
'cubic-edge' Extensions.CubicEdge DEMO
'polyline-edge' Extensions.PolylineEdge DEMO
'cubic-horizontal-edge' Extensions.CubicHorizontalEdge DEMO
'cubic-vertical-edge' Extensions.CubicVerticalEdge DEMO

3. Combo (combos)

type 名称 引入方式 是否默认注册 Demo 注释
'circle-combo' Extensions.CircleCombo DEMO
'rect-combo' Extensions.RectCombo DEMO

4. 数据转换器 (transforms)

用于处理数据,在原始数据输入图后被调用。若有多个,按其配置的数组顺序执行)。

type 名称 引入方式 是否默认注册 Demo 注释
'transform-v4-data' Extensions.TransformV4Data
'map-node-size' Extensions.MapNodeSize

5. 交互 (behaviors)

所有内置、自定义交互应当继承 Extensions.BaseBehavior 或其他已有的交互。

type 名称 引入方式 是否默认注册 Demo 注释
'drag-canvas' Extensions.DragCanvas DEMO
'zoom-canvas' Extensions.ZoomCanvas DEMO
'drag-node' Extensions.DragNode DEMO
'drag-combo' Extensions.DragCombo DEMO
'click-select' Extensions.ClickSelect DEMO
'collapse-expand-combo' Extensions.CollapseExpandCombo DEMO
'collapse-expand-tree' Extensions.CollapseExpandTree DEMO
'activate-relations' Extensions.ActivateRelations DEMO
'brush-select' Extensions.BrushSelect DEMO
'lasso-select' Extensions.LassoSelect DEMO
'create-edge' Extensions.CreateEdge DEMO
'shortcuts-call' Extensions.ShortcutsCall DEMO
'scroll-canvas' Extensions.ScrollCanvas DEMO
'orbit-canvas-3d' Extensions.OrbitCanvas3D DEMO 仅在 renderer: 'webgl-3d' 时可使用
'zoom-canvas-3d' Extensions.ZoomCanvas3D DEMO 仅在 renderer: 'webgl-3d' 时可使用

5. 布局算法 (layouts)

type 名称 引入方式 是否默认注册 Demo 注释
'force' Extensions.ForceLayout DEMO
'grid' Extensions.GridLayout DEMO
'circular' Extensions.CircularLayout DEMO
'concentric' Extensions.ConcentricLayout DEMO
'random' Extensions.RandomLayout
'mds' Extensions.MDSLayout DEMO
'radial' Extensions.RadialLayout DEMO
'fruchterman' Extensions.FruchtermanLayout DEMO
'd3-force' Extensions.D3ForceLayout
'force-atlas-2' Extensions.ForceAtlas2Layout DEMO
'dagre' Extensions.DagreLayout DEMO
'comboCombined' Extensions.ComboCombinedLayout DEMO
'compactBox' Extensions.compactBox DEMO
'dendrogram' Extensions.compactBox DEMO
'indented' Extensions.compactBox DEMO
'mindmap' Extensions.mindmap DEMO

6. 插件 (plugins)

所有内置、自定义插件应当继承 Extensions.BasePlugin 或其他已有的插件。

type 名称 引入方式 是否默认注册 Demo 注释
'history' Extensions.History DEMO
'toolbar' Extensions.Toolbar DEMO
'tooltip' Extensions.Tooltip DEMO
'minimap' Extensions.Minimap DEMO
'grid' Extensions.Grid DEMO
'menu' Extensions.Menu DEMO
'fisheye' Extensions.Fisheye DEMO
'legend' Extensions.Legend DEMO
'timebar' Extensions.Timebar DEMO
'hull' Extensions.Hull DEMO
'snapline' Extensions.Snapline DEMO
'watermarker' Extensions.WaterMarker DEMO 支持图片或多文本