antv/G6和antv/X6

最新推荐文章于 2024-05-24 13:39:19 发布
最新推荐文章于 2024-05-24 13:39:19 发布
阅读量3.5k 收藏
点赞数
分类专栏： antv/X6 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48870945/article/details/126048711
版权

1. g6有combo，x6有 parent.addChild(child)，实现combo效果，即node外面的框子；
2. g6有tooltip插件，x6用 删除 node，removeNode(node.id)，新增 node graph.addNode(node)，实现
共同的：er图布局，必须经过计算（暂未实现）

下面是在 X6 官网调试的demo 代码

import { Graph } from ‘@antv/x6’
import dagre from ‘dagre’
import { DagreLayout } from ‘@antv/layout’

const LINE_HEIGHT = 24
const NODE_WIDTH = 150

let nodes = [
{
id: 1,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 1,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #211,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 2,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 2,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #422,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 3,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 3,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #633,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 4,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 4,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #844,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 5,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 5,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1055,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 6,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 6,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1266,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 7,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 7,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1477,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 8,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 8,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1688,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
},
{
id: 9,
shape: “er-rect”,
width: 60,
height: 40,
label: Child - 9,
zIndex: 1,
attrs: {
body: {
stroke: ‘none’,
fill: #1899,
cursor: “auto”,
},
label: {
fill: ‘#fff’,
fontSize: 12,
cursor: “auto”,
},
},
}
]

let edges = [
{
“id”: “edge1”,
“shape”: “edge”,
“source”: {
“cell”: “1”,
},
“target”: {
“cell”: “2”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
},
{
“id”: “edge2”,
“shape”: “edge”,
“source”: {
“cell”: “3”,
},
“target”: {
“cell”: “4”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
},
{
“id”: “edge3”,
“shape”: “edge”,
“source”: {
“cell”: “5”,
},
“target”: {
“cell”: “4”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
},
{
“id”: “edge4”,
“shape”: “edge”,
“source”: {
“cell”: “4”,
},
“target”: {
“cell”: “6”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
},
{
“id”: “edge5”,
“shape”: “edge”,
“source”: {
“cell”: “6”,
},
“target”: {
“cell”: “7”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
},
{
“id”: “edge6”,
“shape”: “edge”,
“source”: {
“cell”: “7”,
},
“target”: {
“cell”: “8”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
},
{
“id”: “edge7”,
“shape”: “edge”,
“source”: {
“cell”: “7”,
},
“target”: {
“cell”: “9”,
},
“attrs”: {
“line”: {
“stroke”: “#A2B1C3”,
“strokeWidth”: 2
}
},
“zIndex”: 1
}
]

let parentNode = {
id: ‘parent’,
x: 10,
y: 10,
width: 20,
height: 20,
zIndex: 0,
label: ‘Parent’,
attrs: {
body: {
fill: ‘#fffbe6’,
stroke: ‘#ffe7ba’,
cursor: “pointer”,
},
label: {
fontSize: 12,
cursor: “pointer”,
},
text: {
refX: 25,
refY: 10,
},
},
}

Graph.registerPortLayout(
‘erPortPosition’,
(portsPositionArgs) => {
return portsPositionArgs.map((_, index) => {
return {
position: {
x: 0,
y: (index + 1) * LINE_HEIGHT,
},
angle: 0,
}
})
},
true,
)

Graph.registerNode(
‘er-rect’,
{
inherit: ‘rect’,
markup: [
{
tagName: ‘rect’,
selector: ‘body’,
},
{
tagName: ‘text’,
selector: ‘label’,
},
],
attrs: {
rect: {
strokeWidth: 1,
stroke: ‘#5F95FF’,
fill: ‘#5F95FF’,
},
label: {
fontWeight: ‘bold’,
fill: ‘#ffffff’,
fontSize: 12,
},
},
ports: {
groups: {
list: {
markup: [
{
tagName: ‘rect’,
selector: ‘portBody’,
},
{
tagName: ‘text’,
selector: ‘portNameLabel’,
},
{
tagName: ‘text’,
selector: ‘portTypeLabel’,
},
],
attrs: {
portBody: {
width: NODE_WIDTH,
height: LINE_HEIGHT,
strokeWidth: 1,
stroke: ‘#5F95FF’,
fill: ‘#EFF4FF’,
magnet: true,
},
portNameLabel: {
ref: ‘portBody’,
refX: 6,
refY: 6,
fontSize: 10,
},
portTypeLabel: {
ref: ‘portBody’,
refX: 95,
refY: 6,
fontSize: 10,
},
},
position: ‘erPortPosition’,
},
},
},
},
true,
)

Graph.registerNode(
“tooltip-node”,
{
width: 600,
height: 450,
x: 200,
y: 50,
attrs: {
body: {
stroke: “#5F95FF”,
strokeWidth: 1,
fill: “rgba(204,204,204,0.2)”,
refWidth: 1,
refHeight: 1,
},
title: {
text: “Node”,
refX: 40,
refY: 14,
fill: “rgba(0,0,0,0.85)”,
fontSize: 12,
“text-anchor”: “start”,
},
text: {
text: “this is content text”,
refX: 40,
refY: 38,
fontSize: 12,
fill: “rgba(0,0,0,0.6)”,
“text-anchor”: “start”,
},
},
markup: [
{
tagName: “rect”,
selector: “body”,
},
{
tagName: “text”,
selector: “title”,
},
{
tagName: “text”,
selector: “text”,
},
],
},
true
);

const graph = new Graph({
container: document.getElementById(‘container’),
// embedding: {
// enabled: true,
// },
highlighting: {
embedding: {
name: ‘stroke’,
args: {
padding: -1,
attrs: {
stroke: ‘#73d13d’,
},
},
},
},
})

function getNodes(nodes) {
const parent = graph.addNode(parentNode)
nodes.forEach(item => {
if (item.shape !== ‘edge’) {
parent.addChild(graph.addNode(item))
}
})
}

function getEdges(edges) {
edges.forEach(item => {
if (item.shape == ‘edge’) {
if (item.source && item.target) {
graph.addEdge({
…item,
// source: item.source,
// target: item.target,
// attrs: item.attrs,
// normal 默认路由，原样返回路径点。
// orth 正交路由，由水平或垂直的正交线段组成。
// oneSide 受限正交路由，由受限的三段水平或垂直的正交线段组成。
// manhattan 智能正交路由，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。
// metro 智能地铁线路由，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）。
// er 实体关系路由，由 Z 字形的斜角线段组成。
// router: “er”,
connector: {
// normal 简单连接器，用直线连接起点、路由点和终点。
// smooth 平滑连接器，用三次贝塞尔曲线线连接起点、路由点和终点。
// rounded 圆角连接器，用直线连接起点、路由点和终点，并在线段连接处用圆弧链接（倒圆角）。
// jumpover 跳线连接器，用直线连接起点、路由点和终点，并在边与边的交叉处用跳线符号链接。

        name: "normal",
        zIndex: 10000,
      },
    });
  }
}

})
}

// 布局方向
let dir = “LR”; // LR RL TB BT 竖排
// dir = ‘RL’ // LR RL TB BT 竖排
// dir = ‘TB’ // LR RL TB BT 横排
// dir = ‘BT’ // LR RL TB BT 横排
// 自动布局
function layout() {
const nodes = graph.getNodes();
const edges = graph.getEdges();
const g = new dagre.graphlib.Graph();
g.setGraph({ rankdir: dir, nodesep: 16, ranksep: 16 });
g.setDefaultEdgeLabel(() => ({}));
let width = 0;
let height = 0;
nodes.forEach((node, i) => {
if (node.id !== ‘parent’) {
width = 80;
height = 60;
g.setNode(node.id, { width, height });
}
});

edges.forEach((edge) => {
const source = edge.getSource();
const target = edge.getTarget();
g.setEdge(source.cell, target.cell);
});

dagre.layout(g);

graph.freeze();

g.nodes().forEach((id) => {
const node = graph.getCell(id);
if (node) {
const pos = g.node(id);
node.position(pos.x, pos.y);
}
});

edges.forEach((edge) => {
const source = edge.getSourceNode();
const target = edge.getTargetNode();
const sourceBBox = source.getBBox();
const targetBBox = target.getBBox();

if ((dir === "LR" || dir === "RL") && sourceBBox.y !== targetBBox.y) {
  const gap =
    dir === "LR"
      ? targetBBox.x - sourceBBox.x - sourceBBox.width
      : -sourceBBox.x + targetBBox.x + targetBBox.width;
  const fix = dir === "LR" ? sourceBBox.width : 0;
  const x = sourceBBox.x + fix + gap / 2;
  edge.setVertices([
    { x, y: sourceBBox.center.y },
    { x, y: targetBBox.center.y },
  ]);
} else if ((dir === "TB" || dir === "BT") && sourceBBox.x !== targetBBox.x) {
  const gap =
    dir === "TB"
      ? targetBBox.y - sourceBBox.y - sourceBBox.height
      : -sourceBBox.y + targetBBox.y + targetBBox.height;
  const fix = dir === "TB" ? sourceBBox.height : 0;
  const y = sourceBBox.y + fix + gap / 2;
  edge.setVertices([
    { x: sourceBBox.center.x, y },
    { x: targetBBox.center.x, y },
  ]);
} else {
  edge.setVertices([]);
}

});

graph.unfreeze();
}

getNodes(nodes);
getEdges(edges)
layout();

let ctrlPressed = false
const embedPadding = 20
let nodeId = [];

// 计算 parent node 的 width height
let flag = true;
if (flag) {
const nodes = graph.getNodes();
let x = 0;
let y = 0;
let parent = undefined;
nodes.forEach((node) => {
const element = node.getPosition();
if (element.x > x) {
x = element.x;
}
if (element.y > y) {
y = element.y;
}
if (node.id === “parent”) {
parent = node;
}
});

parent.prop(
{
size: { width: x + 100, height: y + 60 },
},
{ skipParentHandler: true }
);

flag = false;
}

// 递归往前找
function getPreEdges(id) {
edges.forEach(item => {
if (item.shape == ‘edge’) {
if (item.target.cell == id) {
item.attrs.line.stroke = ‘#0f0’;
getPreEdges(item.source.cell)
nodeId.push(item.source.cell)
}
}
})
}

// 递归往后找
function getNextEdges(id) {
edges.forEach(item => {
if (item.shape == ‘edge’) {
if (item.source.cell == id) {
item.attrs.line.stroke = ‘#0f0’;
getNextEdges(item.target.cell)
nodeId.push(item.target.cell)
}
}
})
}

graph.on(“edge:click”, ({ e, x, y, edge, view }) => {
// console.log(“edge:click”, edge.store.data);
const nodes = graph.getNodes();
nodes.forEach((node) => {
if (node.store.data.shape == “tooltip-node”) {
console.log(“node”, node.id, node.store.data.shape);
graph.removeNode(node.id);
}
});
graph.addNode({
x,
y: y > 330 ? 330 : y,
shape: “tooltip-node”,
});
});

graph.on(“node:click”, ({ e, x, y, node, view }) => {
if (node.store.data.id == “parent”) {
console.log(“node:click”, node.store.data);
} else {
node.store.data.attrs.body.fill = ‘#f00’;
// 从画布上删除点击的 node
// graph.removeNode(node.id)
// 递归改数据
nodeId.push(${node.id})
getPreEdges(node.id);
getNextEdges(node.id)
graph.clearCells(); // 清空画布所有的 node、edge
nodeId.forEach(ele => {
nodes.forEach(item => {
if (item.id == ele) {
item.attrs.body.fill = ‘#0f0’;
}
})
})
getNodes(nodes)
edges.forEach(item => {
graph.addEdge({
…item,
connector: {
name: “normal”,
},
});
})
// 重新布局
layout();
}
});

graph.on(‘node:change:size’, ({ node, options }) => {
if (options.skipParentHandler) {
return
}

const children = node.getChildren()
if (children && children.length) {
node.prop(‘originSize’, node.getSize())
}
})

graph.on(‘node:change:position’, ({ node, options }) => {
if (options.skipParentHandler || ctrlPressed) {
return
}

const children = node.getChildren()
if (children && children.length) {
node.prop(‘originPosition’, node.getPosition())
}

const parent = node.getParent()
if (parent && parent.isNode()) {
let originSize = parent.prop(‘originSize’)
if (originSize == null) {
originSize = parent.getSize()
parent.prop(‘originSize’, originSize)
}

let originPosition = parent.prop('originPosition')
if (originPosition == null) {
  originPosition = parent.getPosition()
  parent.prop('originPosition', originPosition)
}

let x = originPosition.x
let y = originPosition.y
let cornerX = originPosition.x + originSize.width
let cornerY = originPosition.y + originSize.height
let hasChange = false

const children = parent.getChildren()
if (children) {
  children.forEach((child) => {
    const bbox = child.getBBox().inflate(embedPadding)
    const corner = bbox.getCorner()

    if (bbox.x < x) {
      x = bbox.x
      hasChange = true
    }

    if (bbox.y < y) {
      y = bbox.y
      hasChange = true
    }

    if (corner.x > cornerX) {
      cornerX = corner.x
      hasChange = true
    }

    if (corner.y > cornerY) {
      cornerY = corner.y
      hasChange = true
    }
  })
}

if (hasChange) {
  parent.prop(
    {
      position: { x, y },
      size: { width: cornerX - x, height: cornerY - y },
    },
    { skipParentHandler: true },
  )
}

}
})

秋暮华生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antV-X6-demo-master.zip
04-16
antv-x6最新示例代码
antv系列图引擎X6、G6比对选择，并实现vue实例ER图
weixin_46037781的博客
11-16 4369
官方示例中是(使用String自定义 ToolBar 功能)但是，看了文档，我们还可以使用使用DOM自定义 ToolBar 功能// 工具栏 const toolbar = new G6 . ToolBar({// 渲染自定义节点---组件 const outEl = document . getElementById('toolbar') return outEl } , position : {官方示例注册的自定义边没有提供连线，所以我们如果有需要则得在方法中自己定义连线中途的图形制作默认。
介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
wzy_PROTEIN的博客
03-01 2407
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
任务进度bpmn绘制选型antv/x6与g6
weixin_46037781的博客
02-17 2065
因为想要记录业务【在整个流程开始与结束之外的操作】与流程【图中红色标码的节点为审批节点】结合的全流程进度，因为时间与一些其他原因想采用前端制作。
vue antv X6 ER图
不要和代码过不去
09-14 1256
第二 写入代码 官网demo的fetch('/data/er.json')有问题。第三 写入json 把文件放入assets 文件夹下。第四 运行 剩下的就是修改样式。第一 引入antv。
G6、X6、Vuedraggble、jsplumb的使用 以ER图为例
xiaoleiv9的博客
07-04 1971
直奔主题 你们可以初始化一份JS脚本 把我代码C过去看 阅读性高一些 注释清晰 二、Vuedraggable vue.draggable 全部事件列表 三、G6/X6 ER图 ER图的data数据来源 四、兄弟传值 兄弟调用方法
Vue实现Antv/X6中的示例，以及一些er图开发场景
weixin_46037781的博客
08-31 1981
Vue实现Antv/X6中的示例，以及一些er图开发场景。 已实现ER、 BPMN、 UML、 思维导图、 自定义功能。
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码 版本号： "@antv/x6": "^1.33.1",
10-11
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
antv x6 拖拽流程DEMO
04-26
ANTV X6拖拽流程。可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：https://x6.antv.antgroup.com/examples 参考官网文档：...
antv g6框架离线引用js包
04-26
antv g6框架离线引用js包
hierarchy:用于可视化分层数据的布局算法
05-04
原料药例子const Hierarchy = require ( '@antv/hierarchy' ) ;// your tree dataconst root = { isRoot : true , id : 'Root' , children : [ { id : 'SubTreeNode1' , children : [ { id : 'SubTreeNode1.1' } , {...
图可视化引擎G6与X6
FantasyBreaker的博客
02-04 3424
上一篇提到canvas与svg，在此认识基于它们的图可视化引擎G6与X6。 G6 是 AntV 旗下的一款专业级图可视化引擎，它在高定制能力的基础上，提供简单、易用的接口以及一系列设计优雅的图可视化解决方案，是阿里经济体图可视化与图分析的基础设施。 X6 是蚂蚁金服 AntV 旗下的图编辑引擎，X 象形图编辑场景的关系链接，同时 X6 又是 G6 的孪生兄弟。 如果是拖拽加入节点、从锚点拖拽创建边、编辑边的形状、编辑过程中对齐等重图编辑应用，特别是流程图编辑，用 X6。 图编辑一般是在「编辑修改数据」或
antV x6 开发流程图实例
u014650004的博客
01-12 7225
antV x6 流程图案例
「AntV」使用AntV X6实现流程编排设计器
沐唐风宋雨
07-05 7420
基于AntV X6低成本定制能力：AntV X6是基于HTML和SVG的图表编辑引擎，提供了丰富的API和自定义事件，可以通过编写JavaScript代码，快速实现自定义的图表样式、布局和交互方式，满足具体业务需求。高度可扩展性：AntV X6提供了众多内置扩展，包括DAG图、ER图、流程图等应用，可以帮助你根据自己的需要，自由扩展和定制功能和组件，实现更加灵活的业务需求。
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 222
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1087
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
最新发布
global_coding的博客
05-24 303
vue 使用 export default
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 955
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
antv/g6 初始化一个项目
05-24
要初始化一个 antv/g6 的项目，可以按照以下步骤进行： 1. 确认已经安装好了 Node.js 和 npm。 2. 在命令行中输入以下命令来全局安装 G6 的脚手架工具： ``` npm install -g @antv/g6-cli ``` 3. 在命令行中进入你想要初始化 G6 项目的目录，然后输入以下命令： ``` g6 init ``` 4. 根据提示输入项目名称、描述等信息，然后等待脚手架工具自动下载并安装所需的依赖项。 5. 初始化完成后，进入项目目录并输入以下命令启动项目： ``` npm run dev ``` 6. 打开浏览器，在地址栏输入 `localhost:8080`，即可看到 G6 的示例页面。 希望以上步骤能够帮助你成功初始化一个 antv/g6 项目！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值