使用AntV X6
首先用AntV X6官网的一句简介了解一下什么是X6
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
知道了X6是什么，那么我们就要开始使用了
首先得确定框架，其次就要安装X6
由于项目是vue2的，所以选择的框架为vue2，当然自己也在vue3中写了一版，如有需要vue3的请私信
1.首先在项目中新建一个xxx.vue
<template>
<div class="container1" style="width=100%; height=100%">
<div id="container"></div>
</div>
<div v-for="(item, index) in draList" :key="index" class="btn" @mousedown="startDrag(item, $event)">
<div class="box">{{ item }}</div>
</div>
</template>
2.js部分为
前提安装 npm install @antv/x6 @antv/x6-plugin-snapline @antv/x6-plugin-keyboard文章来源：https://www.toymoban.com/news/detail-568510.html
<script>
import { Graph, Shape } from "@antv/x6";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { startDragToGraph } from "../../utils/drags";
Graph.registerNode(
"lane",
{
inherit: "rect",
markup: [
{
tagName: "rect",
selector: "body",
},
{
tagName: "rect",
selector: "name-rect",
},
{
tagName: "text",
selector: "name-text",
},
],
attrs: {
body: {
fill: "#F8F8F8",
stroke: "#f8f8f8",
strokeWidth: 0.5,
},
"name-rect": {
width: 100,
height: 30,
fill: "#f8f8f8",
stroke: "#f8f8f8",
strokeWidth: 0.5,
// x: -1,
},
"name-text": {
ref: "name-rect",
refY: 30,
refX: 85,
textAnchor: "middle",
// fontWeight: "bold",
fill: "#000",
fontSize: 17,
},
},
},
true
);
Graph.registerNode(
"lane-rect",
{
inherit: "rect",
width: 100,
height: 60,
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
},
text: {
fontSize: 12,
fill: "#262626",
},
},
},
true
);
Graph.registerNode(
"lane-polygon",
{
inherit: "polygon",
width: 80,
height: 80,
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
refPoints: "0,10 10,0 20,10 10,20",
},
text: {
fontSize: 12,
fill: "#262626",
},
},
},
true
);
Graph.registerEdge(
"lane-edge",
{
inherit: "edge",
attrs: {
line: {
stroke: "#A2B1C3",
strokeWidth: 2,
},
},
label: {
attrs: {
label: {
fill: "#A2B1C3",
fontSize: 12,
},
},
},
},
true
);
export default {
data() {
return {
delCell: {},
json: "",
graph: {},
celll: "",
draList: ["xxxx艺", "xxxx运"],
ruleForm: { name: "", count: "" },
dataPlacer: [
{
id: "1",
shape: "lane",
width: 170,
height: 680,
pointerEvents: "none",
position: {
x: 15,
y: 0,
},
label: "主线程",
},
{
id: "2",
shape: "lane",
width: 170,
height: 680,
position: {
x: 230,
y: 0,
},
data: {
disableMove: false,
},
label: "并行路线",
},
{
id: "3",
shape: "lane",
width: 170,
height: 680,
position: {
x: 450,
y: 0,
},
data: {
disableMove: false,
},
label: "并行路线",
},
{
id: "4",
shape: "lane",
width: 170,
height: 680,
position: {
x: 670,
y: 0,
},
data: {
disableMove: false,
},
label: "并行路线",
},
{
id: "4.5",
shape: "lane",
width: 170,
height: 680,
position: {
x: 890,
y: 0,
},
data: {
disableMove: false,
},
label: "并行路线",
},
// 开始预留空位
{
id: "5",
shape: "rect",
width: 140,
height: 42,
position: {
x: 30,
y: 90,
},
data: {
disableMove: false,
},
label: "起点",
fontSize: 20,
attrs: {
magnet: false,
body: {
stroke: "#d9d9d9",
magnet: false,
nodeMovable: false,
strokeDasharray: "5,5",
},
},
parent: "1",
},
{
id: "6",
shape: "rect",
width: 140,
height: 42,
position: {
x: 30,
y: 190,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "1",
},
{
id: "7",
shape: "rect",
width: 140,
height: 42,
position: {
x: 30,
y: 290,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "1",
},
{
id: "8",
shape: "rect",
width: 140,
height: 42,
position: {
x: 30,
y: 390,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "1",
},
// 预留结束
// 第二列预留
{
id: "10",
shape: "rect",
width: 140,
height: 42,
position: {
x: 245,
y: 90,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "2",
},
{
id: "11",
shape: "rect",
width: 140,
height: 42,
position: {
x: 245,
y: 190,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "2",
},
{
id: "12",
shape: "rect",
width: 140,
height: 42,
position: {
x: 245,
y: 290,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "2",
},
{
id: "13",
shape: "rect",
width: 140,
height: 42,
position: {
x: 245,
y: 390,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "2",
},
// 第二列预留结束
// 第三列预留开始
{
id: "15",
shape: "rect",
width: 140,
height: 42,
position: {
x: 465,
y: 90,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "3",
},
{
id: "16",
shape: "rect",
width: 140,
height: 42,
position: {
x: 465,
y: 190,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "3",
},
{
id: "17",
shape: "rect",
width: 140,
height: 42,
position: {
x: 465,
y: 290,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "3",
},
{
id: "18",
shape: "rect",
width: 140,
height: 42,
position: {
x: 465,
y: 390,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "3",
},
// 点三列预留结束
// 第四列预留开始
{
id: "20",
shape: "rect",
width: 140,
height: 42,
position: {
x: 685,
y: 90,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "4",
},
{
id: "21",
shape: "rect",
width: 140,
height: 42,
position: {
x: 685,
y: 190,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "4",
},
{
id: "22",
shape: "rect",
width: 140,
height: 42,
position: {
x: 685,
y: 290,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "4",
},
{
id: "23",
shape: "rect",
width: 140,
height: 42,
position: {
x: 685,
y: 390,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "4",
},
// 第四列预留结束
// 第五列预留开始
{
id: "25",
shape: "rect",
width: 140,
height: 42,
position: {
x: 905,
y: 90,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "5",
},
{
id: "26",
shape: "rect",
width: 140,
height: 42,
position: {
x: 905,
y: 190,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "5",
},
{
id: "27",
shape: "rect",
width: 140,
height: 42,
position: {
x: 905,
y: 290,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "5",
},
{
id: "28",
shape: "rect",
width: 140,
height: 42,
position: {
x: 905,
y: 390,
},
data: {
disableMove: false,
},
label: "空位",
attrs: {
body: {
stroke: "#d9d9d9",
strokeDasharray: "5,5",
},
},
parent: "5",
},
],
};
},
methods: {
init() {
let container = document.getElementById("container");
this.graph = new Graph({
container: container,
autoResize: true,
width: 900,
height: 480,
translating: {
useLocalCoordinates: true,
restrict(cellView) {
//#region
let cell = cellView ? cellView.cell : false;
if (!cell) return false;
let yuliu = cell.label
? cell.label.includes("点") || cell.label.includes("空")
: false;
if (yuliu) {
return false;
}
let temp = cell.label ? cell.label.includes("线") : false;
if (temp) {
return false;
}
//#endregion
if (!cellView || !cellView.model) {
return;
}
if (cellView.model.isLink()) {
// 连线不受限制
return undefined;
}
return cellView.model.getBBox();
},
},
connecting: {
router: "manhattan",
connector: {
name: "normal",
args: {
radius: 8,
},
},
anchor: "center",
connectionPoint: "anchor",
allowBlank: false,
snap: {
radius: 20,
},
createEdge() {
return new Shape.Edge({
connector: "normal",
attrs: {
line: {
stroke: "#2d8cf0",
strokeWidth: 1,
targetMarker: {
name: "classic",
size: 8,
},
},
},
router: {
name: "orth",
},
// zIndex: 0,
});
},
validateConnection({
sourceView,
targetView,
sourceMagnet,
targetMagnet,
}) {
if (sourceView === targetView) {
return false;
}
if (!sourceMagnet) {
return false;
}
if (!targetMagnet) {
return false;
}
return true;
},
},
interacting: function (cellView) {
if (
cellView.cell.getData() != undefined &&
!cellView.cell.getData().disableMove
) {
return { nodeMovable: false };
}
return true;
},
});
// 对齐线
this.graph.use(
new Snapline({
enabled: true,
})
);
// 框选
// this.graph.use(
// new Selection({
// enabled: true,
// showNodeSelectionBox: true,
// })
// );
this.graph.use(
new Keyboard({
enabled: true,
global: true,
})
);
this.graph.on("cell:mouseenter", ({ cell }) => {
let temp = cell.label ? cell.label.includes("线") : false;
if (temp) {
return {
selectable: false,
};
}
let yuliu = cell.label
? cell.label.includes("点") || cell.label.includes("空")
: false;
if (yuliu) {
return {
selectable: false,
};
}
if (cell.isNode()) {
let ports = container.querySelectorAll(".x6-port-body");
let show = true;
for (let i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = show ? "visible" : "hidden";
}
cell.addTools([
{
name: "button-remove",
args: {
x: 0,
y: 0,
offset: { x: 20, y: 10 },
},
},
]);
} else {
cell.addTools([
{
name: "vertices",
args: {
stopPropagation: false,
},
},
{ name: "segments" }, //添加线上的平移
{
name: "button",
args: {
markup: [
{
tagName: "circle",
selector: "button",
attrs: {
r: 16,
stroke: "#3d85f2",
"stroke-width": 3,
fill: "#3d85f2",
cursor: "pointer",
},
},
{
tagName: "text",
textContent: "🗑︎",
selector: "icon",
attrs: {
fill: "#fff",
"font-size": 25,
"text-anchor": "middle",
"pointer-events": "none",
y: "0.3em",
},
},
],
distance: 40,
onClick({ view }) {
const node = view.cell;
node.remove();
},
},
},
]);
}
});
this.graph.on("cell:mouseleave", ({ cell }) => {
cell.removeTools();
let ports = container.querySelectorAll(".x6-port-body");
let show = false;
for (let i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = show ? "visible" : "hidden";
}
});
this.graph.on("node:click", ({ cell }) => {
let yuliu = cell.label
? cell.label.includes("点") || cell.label.includes("空")
: false;
if (yuliu) {
return false;
}
let temp = cell.label ? cell.label.includes("线") : false;
if (temp) {
return false;
}
this.delCell = cell;
let textClick = cell.store.data.attrs.label;
if (textClick.text.includes("xxxx艺")) {
this.flag1 = true;
} else {
this.flag = true;
}
this.celll = cell;
if (cell.form) {
this.ruleForm.name = cell.form.name;
this.ruleForm.count = cell.form.count;
}
});
this.graph.on("cell:mousedown", ({ cell }) => {
let yuliu = cell.label
? cell.label.includes("点") || cell.label.includes("空")
: false;
if (yuliu) {
return false;
}
let temp = cell.label ? cell.label.includes("线") : false;
if (temp) {
return false;
}
this.delCell = cell;
});
this.graph.bindKey("delete", () => {
if (this.delCell) {
this.graph.removeNode(this.delCell);
}
// const cells = this.graph.getSelectedCells();
return false;
});
this.graph.on("node:mousemove", ({ cell }) => {
//#region 过滤
let temp = cell.label ? cell.label.includes("线") : false;
if (temp) {
return {
selectable: false,
};
}
let yuliu = cell.label
? cell.label.includes("点") || cell.label.includes("空")
: false;
if (yuliu) {
return {
selectable: false,
};
}
//#endregion
//#region 吸附
const snapThreshold = 100;
const snapSegmentLength = 1;
let x1 = 30,x2 = 245,x3 = 465,x4 = 685,x5 = 905;
let y1 = 90,y2 = 190,y3 = 290,y4 = 390;
const targetPoints = [
{ x: x1, y: y1 },
{ x: x1, y: y2 },
{ x: x1, y: y3 },
{ x: x1, y: y4 },
// { x: x1, y: y5 },
{ x: x2, y: y1 },
{ x: x2, y: y2 },
{ x: x2, y: y3 },
{ x: x2, y: y4 },
// { x: x2, y: y5 },
{ x: x3, y: y1 },
{ x: x3, y: y2 },
{ x: x3, y: y3 },
{ x: x3, y: y4 },
// { x: x3, y: y5 },
{ x: x4, y: y1 },
{ x: x4, y: y2 },
{ x: x4, y: y3 },
{ x: x4, y: y4 },
// { x: x4, y: y5 },
{ x: x5, y: y1 },
{ x: x5, y: y2 },
{ x: x5, y: y3 },
{ x: x5, y: y4 },
// { x: x5, y: y5 },
];
let node = cell.position();
for (let i = 0; i < targetPoints.length; i++) {
const point = targetPoints[i];
if (node.x <= point.x &&node.x <= point.y &&
node.y > point.x &&node.y <= point.y)
{
cell.position(point.x, point.y);
}
const distX = Math.abs(point.x - node.x);
const distY = Math.abs(point.y - node.y);
// 如果距离小于吸附区域，则进行吸附
if (distX < snapThreshold && distY < snapThreshold) {
// 计算吸附点，使其对齐到网格
const snapX =
Math.round(point.x / snapSegmentLength) * snapSegmentLength;
const snapY =
Math.round(point.y / snapSegmentLength) * snapSegmentLength;
cell.position(snapX, snapY, cell); // 更新图形位置
return false; // 跳出循环，只对第一个目标位置进行吸附
}
}
//#endregion
});
},
reservePlace() {
this.graph.fromJSON(this.dataPlacer);
// let cells = [];
// this.dataPlacer.forEach((item) => {
// if (item.shape === "lane-edge") {
// cells.push(this.graph.createEdge(item));
// } else {
// cells.push(this.graph.createNode(item));
// }
// this.graph.resetCells(cells);
// this.graph.zoomToFit({ padding: 10, maxScale: 1 });
// });
},
// 拖
startDrag(type, e) {
if (type.includes("xxx艺")) {
type = "艺名称";
} else {
type = "运名称";
}
let temp = this.graph;
let arr = [];
let nam = "";
let tt = temp.container.innerText.split("\n");
if (tt) {
for (let j = 0; j < tt.length; j++) {
const dd = tt[j];
if (dd != "") {
arr.push(dd.trim());
}
}
for (let i = 0; i < arr.length + 1; i++) {
const name = arr[i];
nam = `${type}${arr.length - 25 + 1}`;
// console.log(nam);
if (name == type) {
nam = `${type}${i + 1}`;
arr.push(nam);
}
}
}
// 以上代码可以根据自己的实际情况来写，也可以不写以上代码
// 如果不写上面的代码，把下面括号中的nam换成type
startDragToGraph(this.graph, nam, e);
},
}，
mounted() {
this.init();
this.reservePlace();
},
}
</script>
3.在utils文件夹中新建一个drags.js来实现拖拽
安装npm i @antv/x6-plugin-dnd文章来源地址https://www.toymoban.com/news/detail-568510.html
import { Dnd } from "@antv/x6-plugin-dnd";
export const startDragToGraph = (graph, type, e) => {
const node = graph.createNode({
shape: "rect",
width: 140,
height: 42,
attrs: {
label: {
text: type,
fill: "#00539a",
textAnchor: "middle",
verticalAnchor: "middle",
fontSize: 20,
ellipsis: true,
breakWord: true,
textWrap: {
width: -10,
height: -10,
ellipsis: true,
},
},
body: {
stroke: "#00539a",
strokeWidth: 2,
fill: "#ffffff",
},
},
tools: [ // 使拖拽的元素具有删除的图标
{
name: "button-remove",
args: {
x: 20,
y: 10,
},
},
],
ports: ports,
});
graph.on('node:added', ({cell}) => {
const snapThreshold = 100;
const snapSegmentLength = 1;
let x1 = 30,x2 = 245,x3 = 465,x4 = 685,x5 = 905;
let y1 = 90,y2 = 190,y3 = 290,y4 = 390;
const targetPoints = [
{ x: x1, y: y1 },
{ x: x1, y: y2 },
{ x: x1, y: y3 },
{ x: x1, y: y4 },
{ x: x2, y: y1 },
{ x: x2, y: y2 },
{ x: x2, y: y3 },
{ x: x2, y: y4 },
{ x: x3, y: y1 },
{ x: x3, y: y2 },
{ x: x3, y: y3 },
{ x: x3, y: y4 },
{ x: x4, y: y1 },
{ x: x4, y: y2 },
{ x: x4, y: y3 },
{ x: x4, y: y4 },
{ x: x5, y: y1 },
{ x: x5, y: y2 },
{ x: x5, y: y3 },
{ x: x5, y: y4 },
];
let node = cell.position();
for (let i = 0; i < targetPoints.length; i++) {
const point = targetPoints[i];
if (node.x <= point.x &&node.x <= point.y &&
node.y > point.x &&node.y <= point.y)
{
cell.position(point.x, point.y);
}
const distX = Math.abs(point.x - node.x);
const distY = Math.abs(point.y - node.y);
// 如果距离小于吸附区域，则进行吸附
if (distX < snapThreshold && distY < snapThreshold) {
// 计算吸附点，使其对齐到网格
const snapX =
Math.round(point.x / snapSegmentLength) * snapSegmentLength;
const snapY =
Math.round(point.y / snapSegmentLength) * snapSegmentLength;
cell.position(snapX, snapY, cell); // 更新图形位置
return false; // 跳出循环，只对第一个目标位置进行吸附
}
}
//#endregion
})
const dnd = new Dnd({
target: graph,
});
dnd.start(node, e);
};
const ports = {
groups: {
top: {
position: "top",
zIndex: 1,
attrs: {
portBody: {
"port-type": "ellipse",
r: 8,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#2D8CF0",
},
portCross: {
"port-type": "decorator",
ref: "portBody",
"ref-x": -4.5,
"ref-y": 0,
"ref-dx": 0,
"ref-dy": 0,
position: {
name: "center",
},
d: "M 0 0 L 10 0 M 5 -5 L 5 5",
stroke: "#fff",
strokeWidth: 1,
fill: "#fff",
magnet: true,
zIndex: 2,
},
},
markup: [
{
tagName: "circle",
selector: "portBody",
},
{
tagName: "path",
selector: "portCross",
},
],
},
bottom: {
position: "bottom",
zIndex: 1,
attrs: {
portBody: {
"port-type": "ellipse",
r: 8,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#2D8CF0",
},
portCross: {
"port-type": "decorator",
ref: "portBody",
"ref-x": -4.5,
"ref-y": 0,
"ref-dx": 0,
"ref-dy": 0,
position: {
name: "center",
},
d: "M 0 0 L 10 0 M 5 -5 L 5 5",
stroke: "#fff",
strokeWidth: 1,
fill: "#fff",
magnet: true,
zIndex: 2,
},
},
markup: [
{
tagName: "circle",
selector: "portBody",
},
{
tagName: "path",
selector: "portCross",
},
],
},
left: {
position: "left",
zIndex: 1,
attrs: {
portBody: {
"port-type": "ellipse",
r: 8,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#2D8CF0",
},
portCross: {
"port-type": "decorator",
ref: "portBody",
"ref-x": -4.5,
"ref-y": 0,
"ref-dx": 0,
"ref-dy": 0,
position: {
name: "center",
},
d: "M 0 0 L 10 0 M 5 -5 L 5 5",
stroke: "#fff",
strokeWidth: 1,
fill: "#fff",
magnet: true,
zIndex: 2,
},
},
markup: [
{
tagName: "circle",
selector: "portBody",
},
{
tagName: "path",
selector: "portCross",
},
],
},
right: {
position: "right",
zIndex: 1,
attrs: {
portBody: {
"port-type": "ellipse",
r: 8,
magnet: true,
stroke: "#2D8CF0",
strokeWidth: 2,
fill: "#2D8CF0",
},
portCross: {
"port-type": "decorator",
ref: "portBody",
"ref-x": -4.5,
"ref-y": 0,
"ref-dx": 0,
"ref-dy": 0,
position: {
name: "center",
},
d: "M 0 0 L 10 0 M 5 -5 L 5 5",
stroke: "#fff",
strokeWidth: 1,
fill: "#fff",
magnet: true,
zIndex: 2,
},
},
markup: [
{
tagName: "circle",
selector: "portBody",
},
{
tagName: "path",
selector: "portCross",
},
],
},
},
items: [
{
id: "port1",
group: "top",
},
{
id: "port2",
group: "bottom",
},
{
id: "port3",
group: "left",
},
{
id: "port4",
group: "right",
},
],
};
到了这里，关于创建可交互的图表：AntV X6实现预留空白位置、拖拽吸附与信息修改弹框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
