【G6】G6学习笔记（一）

前言

• 记录下g6学习笔记以及心得。

官方入门案例

• 入门案例是2个圆中间一根线连着，我粗略研究了下，发现new G6里的配置项就是根据配置项制作canvas，然后结合数据源做出图来。
• 其中container 是id对应的挂载点，会把canvas插进去。
• 我使用cra然后修改成react ：

import React, { useEffect } from "react";
import G6 from "@antv/g6";

const data = {
	nodes: [
		{
			id: "node1",
			label: "Circle1",
			x: 150, //x轴距离
			y: 150,
		},
		{
			id: "node2",
			label: "Circle2", //圆的标签
			x: 400,
			y: 150,
		},
	],
	edges: [
		{
			source: "node1",
			target: "node2",
		},
	],
};

function App() {
	useEffect(() => {
		const graph = new G6.Graph({
			container: "container", //挂载id
			width: 500, //canvas 宽高
			height: 500,
			defaultNode: {
				type: "circle",
				size: [222],
				color: "#5B8FF9",
				style: {
					fill: "#9EC9FF",
					lineWidth: 5, //边框
				},
				labelCfg: {
					style: {
						fill: "#fff",
						fontSize: 20,
					},
				},
			},
			defaultEdge: {
				//配置属性
				style: {
					stroke: "#e2e2e2",
				},
			},
		});

		graph.data(data);
		graph.render();
	}, []);

	return <div id="container" />;
}
export default App;

• 看了下graph那个实例，应该是携带数据，后续操作改变data重新render 即可重新绘制：

function App() {
	useEffect(() => {
		const graph = new G6.Graph({
			container: "container", //挂载id
			width: 500, //canvas 宽高
			height: 500,
			defaultNode: {
				type: "circle",
				size: [222],
				color: "#5B8FF9",
				style: {
					fill: "#9EC9FF",
					lineWidth: 5, //边框
				},
				labelCfg: {
					style: {
						fill: "#fff",
						fontSize: 20,
					},
				},
			},
			defaultEdge: {
				//配置属性
				style: {
					stroke: "#e2e2e2",
				},
			},
		});

		setTimeout(() => {
			data.edges = [];
			console.log("dd");
			graph.data(data);
			graph.render();
		}, 1000);
		graph.data(data);
		graph.render();
	}, []);
	return <div id="container" />;
}

官网入门案例2

• 主要就是讲2个配置项，可以直接查看全局图像，而不是局部图像。

function App() {
	useEffect(() => {
		const graph = new G6.Graph({
			container: "container",
			width: 1000,
			height: 600,
			fitView: true, //将图放到完整
			fitViewPadding: [20, 40, 50, 20], //留白距离
		});
		const tofectch = async () => {
			const response = await fetch(
				"https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json"
			);
			const remoteData = await response.json();

			graph.data(remoteData);
			graph.render();
		};
		tofectch();
	}, []);

	return <div id="container" />;
}

元素及其配置案例

• 我只想说mmp ，官网找的什么鬼例子，图一丁点小，看都看不清还让我们看里面变化。
• https://g6.antv.vision/zh/docs/manual/tutorial/elements
• 边元素的属性数据结构与节点元素相似，只是其他属性中多了 source 和 target 字段，代表起始和终止节点的 id。

{
	id: 'node0',          // 元素的 id
  type: 'circle',      // 元素的图形
  size: 40,             // 元素的大小
  label: 'node0'        // 标签文字
  labelCfg: {           // 标签配置属性
    positions: 'center',// 标签的属性，标签在元素中的位置
    style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
      fontSize: 12      // 标签的样式属性，文字字体大小
      // ...            // 标签的其他样式属性
    }
  }
  // ...,               // 其他属性
  style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行
    fill: '#000',       // 样式属性，元素的填充色
    stroke: '#888',     // 样式属性，元素的描边色
    // ...              // 其他样式属性
  }
}

• 我仔细研究了下，这章意思就是把那个对象拉来改一改节点，然后render，跟我上面那个差不多意思。

布局

• layout是个比较神奇的东西，大概翻了一下，貌似是一般做图，不用关心位置在哪，只要关心各个节点与边什么关系，然后用layout布局配置可以自动计算位置之类，包括还有些动画效果。
  https://g6.antv.vision/zh/docs/api/layout/Graph#center-7

图交互

• 这节例子写的很好，可以好好研究下：
• https://g6.antv.vision/zh/docs/manual/tutorial/behavior

function App() {
	useEffect(() => {
		const graph = new G6.Graph({
			container: "mountNode",
			width: 800,
			height: 600,
			// 节点默认配置
			defaultNode: {
				labelCfg: {
					style: {
						fill: "#fff",
					},
				},
			},
			// 边默认配置
			defaultEdge: {
				labelCfg: {
					autoRotate: true,
				},
			},
			// 节点在各状态下的样式
			nodeStateStyles: {
				// hover 状态为 true 时的样式
				hover: {
					fill: "lightsteelblue",
				},
				// click 状态为 true 时的样式
				click: {
					stroke: "#000",
					lineWidth: 3,
				},
			},
			// 边在各状态下的样式
			edgeStateStyles: {
				// click 状态为 true 时的样式
				click: {
					stroke: "steelblue",
				},
			},
			// 布局
			layout: {
				type: "force",
				linkDistance: 100,
				preventOverlap: true,
				nodeStrength: -30,
				edgeStrength: 0.1,
			},
			// 内置交互
			modes: {
				default: ["drag-canvas", "zoom-canvas", "drag-node"],
			},
		});
		const tofectch = async () => {
			const response = await fetch(
				"https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json"
			);
			const remoteData = await response.json();

			const nodes = remoteData.nodes;
			const edges = remoteData.edges;
			nodes.forEach((node) => {
				if (!node.style) {
					node.style = {};
				}
				node.style.lineWidth = 1;
				node.style.stroke = "#666";
				node.style.fill = "steelblue";
				switch (node.class) {
					case "c0": {
						node.shape = "circle";
						node.size = 30;
						break;
					}
					case "c1": {
						node.shape = "rect";
						node.size = [35, 20];
						break;
					}
					case "c2": {
						node.shape = "ellipse";
						node.size = [35, 20];
						break;
					}
					default: {
					}
				}
			});
			edges.forEach((edge) => {
				if (!edge.style) {
					edge.style = {};
				}
				edge.style.lineWidth = edge.weight;
				edge.style.opacity = 0.6;
				edge.style.stroke = "grey";
			});

			graph.data(remoteData);
			graph.render();

			// 监听鼠标进入节点
			graph.on("node:mouseenter", (e) => {
				const nodeItem = e.item;
				// 设置目标节点的 hover 状态 为 true
				graph.setItemState(nodeItem, "hover", true);
			});
			// 监听鼠标离开节点
			graph.on("node:mouseleave", (e) => {
				const nodeItem = e.item;
				// 设置目标节点的 hover 状态 false
				graph.setItemState(nodeItem, "hover", false);
			});
			// 监听鼠标点击节点
			graph.on("node:click", (e) => {
				// 先将所有当前有 click 状态的节点的 click 状态置为 false
				const clickNodes = graph.findAllByState("node", "click");
				clickNodes.forEach((cn) => {
					graph.setItemState(cn, "click", false);
				});
				const nodeItem = e.item;
				// 设置目标节点的 click 状态 为 true
				graph.setItemState(nodeItem, "click", true);
			});
			// 监听鼠标点击节点
			graph.on("edge:click", (e) => {
				// 先将所有当前有 click 状态的边的 click 状态置为 false
				const clickEdges = graph.findAllByState("edge", "click");
				clickEdges.forEach((ce) => {
					graph.setItemState(ce, "click", false);
				});
				const edgeItem = e.item;
				// 设置目标边的 click 状态 为 true
				graph.setItemState(edgeItem, "click", true);
			});
		};
		tofectch();
	}, []);

	return <div id="mountNode" />;
}

插件

• 这个缩略图插件太实用了。
• https://g6.antv.vision/zh/docs/manual/tutorial/plugins

const minimap = new G6.Minimap({
	size: [100, 100],
	className: "minimap",
	type: "delegate",
});
	const graph = new G6.Graph({
			container: "mountNode",
..........................
			plugins: [minimap],
		});

• 其他就是看api ，有新认识再写