antv/x6 自定义html节点并且支持动态更新节点内容

2023-11-06 18:30

本文主要是介绍antv/x6 自定义html节点并且支持动态更新节点内容,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

antv/x6 自定义html节点

    • 效果图
    • 定义一个连接桩公共方法
    • 注册图形节点
    • 创建html节点
    • 动态更新节点内容

效果图

在这里插入图片描述

定义一个连接桩公共方法

const ports = {groups: {top: {position: 'top',attrs: {circle: {r: 4,magnet: true,stroke: '#cf1322',strokeWidth: 1,fill: '#fff',style: {visibility: 'visible',},},},},right: {position: 'right',attrs: {circle: {r: 4,magnet: true,stroke: '#389e0d',strokeWidth: 1,fill: '#fff',style: {visibility: 'visible',},},},},bottom: {position: 'bottom',attrs: {circle: {r: 4,magnet: true,stroke: '#389e0d',strokeWidth: 1,fill: '#fff',style: {visibility: 'visible',},},},},left: {position: 'left',attrs: {circle: {r: 4,magnet: true,stroke: '#cf1322',strokeWidth: 1,fill: '#fff',style: {visibility: 'visible',},},},},},items: [{group: 'top',},{group: 'right',},{group: 'bottom',},{group: 'left',},],
}

注册图形节点

Shape.HTML.register({shape: 'html',width: 70,height: 36,effect: ['data'],html(cell) {const { label, props } = cell.getData()const div = document.createElement('div')div.style.width = 70const titleDiv = document.createElement('div')titleDiv.style.width = '70px'titleDiv.style.height = '36px'titleDiv.style.background = '#eb2f96'titleDiv.style.color = 'white'titleDiv.style.fontSize = '14px'titleDiv.style.textAlign = 'center'titleDiv.style.lineHeight = '36px'titleDiv.style.boxSizing = 'border-box'titleDiv.style.fontSize = '12px'titleDiv.style.borderRadius = '6px'titleDiv.style.whiteSpace = 'nowrap'titleDiv.style.overflow = 'hidden'titleDiv.style.textOverflow = 'ellipsis'titleDiv.setAttribute('title', label)titleDiv.textContent = labeldiv.append(titleDiv)return div},ports: { ...ports,items: [{group: 'left'},{group: 'right'}]},})
  1. effect 是当前节点的 prop 数组,当 effect 包含的 prop 有变动时,会重新执行 html 方法,返回新的 dom,更新节点内容;
  2. ports 是此节点的连接桩;此节点只用到了左右两个连接桩;

创建html节点

const r2 = this.graph.createNode({shape: 'html',data: {props:{desc: ''},label: '自定义html',},
})
  1. shape 要和注册节点里的名称一致;

动态更新节点内容

let cell = this.graph.getCellById(id)
cell.prop('data/label', '文字')
cell.prop('data/props/voice', 'desc')
  • id 是要更改内容的cell的id;

这篇关于antv/x6 自定义html节点并且支持动态更新节点内容的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/358322

相关文章

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Mybatis嵌套子查询动态SQL编写实践

《Mybatis嵌套子查询动态SQL编写实践》:本文主要介绍Mybatis嵌套子查询动态SQL编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言一、实体类1、主类2、子类二、Mapper三、XML四、详解总结前言MyBATis的xml文件编写动态SQL

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》:本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求,通过公司网络代理访问的请求需要做请

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

SpringBoot实现Kafka动态反序列化的完整代码

《SpringBoot实现Kafka动态反序列化的完整代码》在分布式系统中,Kafka作为高吞吐量的消息队列,常常需要处理来自不同主题(Topic)的异构数据,不同的业务场景可能要求对同一消费者组内的... 目录引言一、问题背景1.1 动态反序列化的需求1.2 常见问题二、动态反序列化的核心方案2.1 ht

golang实现动态路由的项目实践

《golang实现动态路由的项目实践》本文主要介绍了golang实现动态路由项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 目录一、动态路由1.结构体(数据库的定义)2.预加载preload3.添加关联的方法一、动态路由1

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

Java如何将文件内容转换为MD5哈希值

《Java如何将文件内容转换为MD5哈希值》:本文主要介绍Java如何将文件内容转换为MD5哈希值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java文件内容转换为MD5哈希值一个完整的Java示例代码代码解释注意事项总结Java文件内容转换为MD5

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue