antV G6新手入门使用笔记

普通的图表，echarts 足够用，但是比如关系图等，echarts 定制化配置还是太麻烦。综合考量，还是 G6 方便 G6 是一个图可视化引擎。它提供了图

普通的图表，echarts 足够用，但是比如关系图等，echarts 定制化配置还是太麻烦。综合考量，还是 G6 方便

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

1
2
3

npm install --save @antv/g6

import G6 from '@antv/g6';

G6 使用

<div id="mountNode"></div>

const graph = new G6.Graph({
  container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  width: 800, // Number，必须，图的宽度
  height: 500, // Number，必须，图的高度
});
graph.data({nodes:[{id: 'node1'}], edges:[{source: 'node1',target: 'node2',}]});
graph.render(); // 渲染图

nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性，x、 y 用于定位；
edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与目标点 id。
点和边的更多属性参见：内置的节点，内置的边教程。

整体配置

配置项	类型	选项 / 示例	默认	说明
fitView	Boolean	true / false	false	是否将图适配到画布大小，可以防止超出画布或留白太多。
fitViewPadding	Number / Array	20 / [ 20, 40, 50, 20 ]	0	画布上的四周留白宽度。
animate	Boolean	true / false	false	是否启用图的动画。
modes	Object	{ default: [ ‘drag-node’]}	null	图上行为模式的集合（如：拖拽、缩放）。由于比较复杂，按需参见：G6 中的 Mode 教程。
defaultNode	Object	{ type: ‘circle’, style: {}}	null	节点默认的属性，包括节点的一般属性和样式属性（style）。
defaultEdge	Object	{type: ‘polyline’, color: ‘#000}	null	边默认的属性，包括边的一般属性和样式属性（style）。
nodeStateStyles	Object	{hover: {……},select: {…… }}	null	节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。
edgeStateStyles	Object	{hover: {……} ,select: {…… }}	null	边在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。

这个是初始化图表配置项

图布局 Layout

当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。

相比 echarts，支持布局多很多，G6 提供了 9 种一般图的布局和 4 种树图的布局：

一般图：

Random Layout：随机布局；
Force Layout：经典力导向布局：

力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。

Circular Layout：环形布局；
Radial Layout：辐射状布局；
MDS Layout：高维数据降维算法布局；
Fruchterman Layout：Fruchterman 布局，一种力导布局；
Dagre Layout：层次布局；
Concentric Layout：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心；
Grid Layout：格子布局，将节点有序（默认是数据顺序）排列在格子上。

树图布局：

Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
CompactBox Layout：紧凑树布局；
Mindmap Layout：脑图布局；
Intended Layout：缩进布局。

设置节点和背景

const graph = new G6.Graph({
  // ...
  defaultNode: {
    position: 'left',
    style: {
      background: {
        fill: '#ffffff',
        stroke: 'green',
        padding: [3, 2, 3, 2],
        radius: 2,
        lineWidth: 3,
      },
    },
  },
  defaultEdge: {
    autoRotate: true,
    style: {
      background: {
        fill: '#ffffff',
        stroke: '#000000',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
  }
})