前言
官方入门案例
- 入门案例是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,
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",
width: 500,
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",
width: 500,
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: {
fill: "lightsteelblue",
},
click: {
stroke: "#000",
lineWidth: 3,
},
},
edgeStateStyles: {
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;
graph.setItemState(nodeItem, "hover", true);
});
graph.on("node:mouseleave", (e) => {
const nodeItem = e.item;
graph.setItemState(nodeItem, "hover", false);
});
graph.on("node:click", (e) => {
const clickNodes = graph.findAllByState("node", "click");
clickNodes.forEach((cn) => {
graph.setItemState(cn, "click", false);
});
const nodeItem = e.item;
graph.setItemState(nodeItem, "click", true);
});
graph.on("edge:click", (e) => {
const clickEdges = graph.findAllByState("edge", "click");
clickEdges.forEach((ce) => {
graph.setItemState(ce, "click", false);
});
const edgeItem = e.item;
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],
});
