先举一个栗子：
效果链接：code.juejin.cn/pen/7226264…
如果不会请移步到官网的栗子，请点击查看
狠人话不多，直接给大家上代码：
- 整体代码片段
<template>
<div id="container" style="position:relative;"></div>
</template>
<script>
/* eslint-disable */
import G6 from "@antv/g6";
import methods from "./config/methods";
export default {
name: "G6Dom",
props: {
datas: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
graph: null
};
},
watch: {
datas() {
if (this.graph) {
this.graph.data(this.dataTransform(this.datas));
this.graph.render();
}
},
},
mounted() {
this.init();
if (document.getElementById("container")) {
const container = document.getElementById("container");
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 20;
const graph = new G6.Graph({
container: "container",
width,
height,
defaultNode: {
size: [300, 400],
type: "dice-er-box",
color: "#5B8FF9",
style: {
fill: "#9EC9FF",
lineWidth: 3,
},
labelCfg: {
style: {
fill: "black",
fontSize: 20,
},
},
},
defaultEdge: {
type: "dice-er-edge",
style: {
stroke: "#e2e2e2",
lineWidth: 4,
endArrow: true,
},
},
modes: {
default: [
"dice-er-scroll",
"drag-node",
"drag-canvas",
"drag-combo",
// {
// type: 'tooltip',
// formatText(model) {
// return model.label;
// },
// offset: 15
// }
],
},
layout: {
type: "dagre",
rankdir: "LR",
align: "UL",
controlPoints: true,
nodesepFunc: () => 0.2,
ranksepFunc: () => 0.5,
center: [0, 300],
},
fitCenter: true, // 平移图到中心将对齐到画布中心，但不缩放。
animate: true,
});
graph.data(this.dataTransform(this.datas));
graph.render();
this.graph = graph;
}
},
methods: {
...methods,
dataTransform(data) {
const nodes = [];
const edges = [];
data.map((node) => {
// 表与表关联
if (node.to) {
node.to.forEach((item) => {
if (item.tableId) {
edges.push({
source: node.tableId,
target: item.tableId,
});
}
});
}
const attrsArr = [];
if (node.children) {
node.children.forEach((attr) => {
const { fieldId, name } = attr;
attrsArr.push({
key: fieldId,
type: name,
});
if (attr.to) {
attr.to.forEach((relation) => {
edges.push({
source: node.tableId,
target: relation.tableId,
sourceKey: attr.fieldId,
targetKey: relation.fieldId,
});
});
}
});
}
const { tableId, tableName } = node;
nodes.push({
id: tableId,
label: tableName,
attrs: attrsArr,
});
});
return {
nodes,
edges,
};
},
// 放大
onZoomIn() {
this.graph.zoom(1.2);
this.graph.emit("afterrender");
},
// 缩小
onZoomOut() {
this.graph.zoom(0.8);
this.graph.emit("afterrender");
},
onLayout() {
// 更新布局
const grid = {
type: "grid",
begin: [0, 20],
preventOverlap: true, // 防止重叠
};
// const dagre = {
// type: 'dagre',
// rankdir: 'LR',
// align: 'UL',
// controlPoints: true,
// nodesepFunc: () => 0.2,
// ranksepFunc: () => 0.5,
// }
this.graph.updateLayout(grid);
},
},
};
</script>
<style lang="less" scoped>
#container {
width: 100%;
height: 100%;
}
.toolbar_box {
padding: 10px 0 10px 18px;
i {
cursor: pointer;
margin: 0 10px 0 0;
color: #409dfe;
}
}
/deep/.g6-tooltip {
padding: 5px;
color: #444;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
- 部分代码片段，methods.js
const { Util, registerBehavior, registerEdge, registerNode } = G6;
import { isInBBox, fittingString } from "@/util/utils";
const itemHeight = 30;
const globalFontSize = 30;
/* eslint-disable */
const methods = {
init() {
this.customRegisterBehavior();
this.customRegisterEdge();
this.customRegisterNode();
},
// 滚动
customRegisterBehavior() {
registerBehavior("dice-er-scroll", {
getDefaultCfg() {
return {
multiple: true,
};
},
getEvents() {
return {
itemHeight,
wheel: "scorll",
click: "click",
"node:mousemove": "move",
};
},
scorll(e) {
e.preventDefault();
const { graph } = this;
const nodes = graph.getNodes().filter((n) => {
const bbox = n.getBBox();
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
});
const x = e.deltaX || e.movementX;
let y = e.deltaY || e.movementY;
if (!y && navigator.userAgent.indexOf("Firefox") > -1)
y = (-e.wheelDelta * 125) / 3;
if (nodes) {
const edgesToUpdate = new Set();
nodes.forEach((node) => {
const model = node.getModel();
if (model.attrs.length < 2) {
return;
}
const idx = model.startIndex || 0;
let startX = model.startX || 0.5;
let startIndex = idx + y * 0.02;
startX -= x;
if (startIndex < 0) {
startIndex = 0;
}
if (startX > 0) {
startX = 0;
}
if (startIndex > model.attrs.length - 1) {
startIndex = model.attrs.length - 1;
}
graph.updateItem(node, {
startIndex,
startX,
});
node.getEdges().forEach((edge) => edgesToUpdate.add(edge));
});
// G6 update the related edges when graph.updateItem with a node according to the new properties
// here you need to update the related edges manualy since the new properties { startIndex, startX } for the nodes are custom, and cannot be recognized by G6
edgesToUpdate.forEach((edge) => edge.refresh());
}
},
click(e) {
const { graph } = this;
const item = e.item;
const shape = e.shape;
if (!item) {
return;
}
if (shape.get("name") === "collapse") {
graph.updateItem(item, {
collapsed: true,
size: [300, 50],
});
setTimeout(() => graph.layout(), 100);
} else if (shape.get("name") === "expand") {
graph.updateItem(item, {
collapsed: false,
size: [300, 80],
});
setTimeout(() => graph.layout(), 100);
}
},
move(e) {
const name = e.shape.get("name");
const item = e.item;
if (name && name.startsWith("item")) {
this.graph.updateItem(item, {
selectedIndex: Number(name.split("-")[1]),
});
} else {
this.graph.updateItem(item, {
selectedIndex: NaN,
});
}
},
});
},
// 连线
customRegisterEdge() {
registerEdge("dice-er-edge", {
draw(cfg, group) {
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();
const sourceIndex = sourceNode.attrs.findIndex(
(e) => e.key === cfg.sourceKey
);
const sourceStartIndex = sourceNode.startIndex || 0;
let sourceY = 15;
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
sourceY = Math.min(sourceY, 300);
}
const targetIndex = targetNode.attrs.findIndex(
(e) => e.key === cfg.targetKey
);
const targetStartIndex = targetNode.startIndex || 0;
let targetY = 15;
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
targetY = Math.min(targetY, 300);
}
const startPoint = {
...cfg.startPoint,
};
const endPoint = {
...cfg.endPoint,
};
startPoint.y = startPoint.y + sourceY;
endPoint.y = endPoint.y + targetY;
let shape;
if (sourceNode.id !== targetNode.id) {
shape = group.addShape("path", {
attrs: {
stroke: "#5B8FF9",
path: [
["M", startPoint.x, startPoint.y],
[
"C",
endPoint.x / 3 + (2 / 3) * startPoint.x,
startPoint.y,
endPoint.x / 3 + (2 / 3) * startPoint.x,
endPoint.y,
endPoint.x,
endPoint.y,
],
],
endArrow: true,
},
name: "path-shape",
});
} else if (!sourceNode.collapsed) {
let gap = Math.abs((startPoint.y - endPoint.y) / 3);
if (startPoint["index"] === 1) {
gap = -gap;
}
shape = group.addShape("path", {
attrs: {
stroke: "#5B8FF9",
path: [
["M", startPoint.x, startPoint.y],
[
"C",
startPoint.x - gap,
startPoint.y,
startPoint.x - gap,
endPoint.y,
startPoint.x,
endPoint.y,
],
],
endArrow: true,
},
name: "path-shape",
});
}
return shape;
},
afterDraw(cfg, group) {
const labelCfg = cfg.labelCfg || {};
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();
if (sourceNode.collapsed && targetNode.collapsed) {
return;
}
const path = group.find(
(element) => element.get("name") === "path-shape"
);
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
const label = group.addShape("text", {
attrs: {
...labelStyle,
text: cfg.label || "",
fill: "#000",
textAlign: "center",
stroke: "#fff",
lineWidth: 1,
},
});
label.rotateAtStart(labelStyle.rotate);
},
});
},
// 盒子
customRegisterNode() {
registerNode("dice-er-box", {
draw(cfg, group) {
const width = 250;
const height = 316;
const itemCount = 10;
const boxStyle = {
stroke: "#096DD9",
radius: 4,
};
const {
attrs = [],
startIndex = 0,
selectedIndex,
collapsed,
icon,
} = cfg;
const list = attrs;
const afterList = list.slice(
Math.floor(startIndex),
Math.floor(startIndex + itemCount - 1)
);
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
group.addShape("rect", {
attrs: {
fill: boxStyle.stroke,
height: 30,
width,
radius: [boxStyle.radius, boxStyle.radius, 0, 0],
},
draggable: true,
});
let fontLeft = 12;
if (icon && icon.show !== false) {
group.addShape("image", {
attrs: {
x: 8,
y: 8,
height: 16,
width: 16,
...icon,
},
});
fontLeft += 18;
}
let text = fittingString(cfg.label, 500, globalFontSize);
// 每个矩形框的标题
group.addShape("text", {
attrs: {
y: 22,
x: fontLeft,
fill: "#fff",
text,
fontSize: 12,
fontWeight: 500,
},
});
group.addShape("rect", {
attrs: {
x: 0,
y: collapsed ? 30 : 300,
height: 15,
width,
fill: "#eee",
radius: [0, 0, boxStyle.radius, boxStyle.radius],
cursor: "pointer",
},
name: collapsed ? "expand" : "collapse",
});
group.addShape("text", {
attrs: {
x: width / 2 - 6,
y: (collapsed ? 30 : 300) + 12,
text: collapsed ? "+" : "-",
width,
fill: "#000",
radius: [0, 0, boxStyle.radius, boxStyle.radius],
cursor: "pointer",
},
name: collapsed ? "expand" : "collapse",
});
const keyshape = group.addShape("rect", {
attrs: {
x: 0,
y: 0,
width,
height: collapsed ? 45 : height,
...boxStyle,
},
draggable: true,
});
if (collapsed) {
return keyshape;
}
const listContainer = group.addGroup({});
listContainer.setClip({
type: "rect",
attrs: {
x: -8,
y: 30,
width: width + 16,
height: 300 - 30,
},
});
listContainer.addShape({
type: "rect",
attrs: {
x: 1,
y: 30,
width: width - 2,
height: 300 - 30,
fill: "#fff",
},
draggable: true,
});
if (list.length > itemCount) {
const barStyle = {
width: 4,
padding: 0,
boxStyle: {
stroke: "#00000022",
},
innerStyle: {
fill: "#00000022",
},
};
listContainer.addShape("rect", {
attrs: {
y: 30,
x: width - barStyle.padding - barStyle.width,
width: barStyle.width,
height: height - 30,
...barStyle.boxStyle,
},
});
const indexHeight =
afterList.length > itemCount
? (afterList.length / list.length) * height
: 10;
listContainer.addShape("rect", {
attrs: {
y:
30 +
barStyle.padding +
(startIndex / list.length) * (height - 30),
x: width - barStyle.padding - barStyle.width,
width: barStyle.width,
height: Math.min(height, indexHeight),
...barStyle.innerStyle,
},
});
}
if (afterList) {
afterList.forEach((e, i) => {
const isSelected =
Math.floor(startIndex) + i === Number(selectedIndex);
let { key = "", type } = e;
if (type) {
key = type;
}
const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
listContainer.addShape("rect", {
attrs: {
x: 1,
y: i * itemHeight - itemHeight / 2 + offsetY,
width: width - 4,
height: itemHeight,
radius: 2,
lineWidth: 1,
cursor: "pointer",
},
name: `item-${Math.floor(startIndex) + i}-content`,
draggable: true,
});
if (!cfg.hideDot) {
listContainer.addShape("circle", {
attrs: {
x: 0,
y: i * itemHeight + offsetY,
r: 3,
stroke: boxStyle.stroke,
fill: "white",
radius: 2,
lineWidth: 1,
cursor: "pointer",
},
});
listContainer.addShape("circle", {
attrs: {
x: width,
y: i * itemHeight + offsetY,
r: 3,
stroke: boxStyle.stroke,
fill: "white",
radius: 2,
lineWidth: 1,
cursor: "pointer",
},
});
}
listContainer.addShape("text", {
attrs: {
x: 12,
y: i * itemHeight + offsetY + 6,
text: label,
fontSize: 12,
fill: "#000",
fontFamily:
"Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
full: e,
fontWeight: isSelected ? 500 : 100,
cursor: "pointer",
},
name: `item-${Math.floor(startIndex) + i}`,
});
});
}
return keyshape;
},
getAnchorPoints() {
return [[0, 0], [1, 0]];
},
});
},
}
export default methods;
- 工具类，utils.js
const {
x,
y
} = point;
const {
minX,
minY,
maxX,
maxY
} = bbox;
return x < maxX && x > minX && y > minY && y < maxY;
}
/**
* format the string
* @param {string} str The origin string
* @param {number} maxWidth max width
* @param {number} fontSize font size
* @return {string} the processed result
*/
import G6 from '@antv/g6';
export function fittingString(str, maxWidth, fontSize) {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
鉴定完毕，欢迎友友们一起交流学习！！
