antV G6新手入门 使用笔记
Author：zhoulujun Date：
普通的图表，echarts足够用，但是比如关系图等，echarts定制化配置还是太麻烦。综合考量，还是G6 方便
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。
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,
},
},
}
})
转载本站文章《antV G6新手入门 使用笔记》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/charts/8500.html