antvX6自定义 HTML 节点创建与更新教程

自定义 HTML 节点创建与更新教程

本文详细介绍如何利用 HTML、CSS 和 JavaScript 创建自定义节点，并通过动态更新节点数据来改变节点显示效果。无论你是否有前端基础，都能轻松跟着本教程一步步实现。

1. 基础样式设置

首先，使用 CSS 定义基础样式，确保整个页面及节点内的文字、链接、按钮等元素呈现出整洁美观的效果。

:root {line-height: 1.5;font-weight: 400;font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust: 100%;
}a {font-weight: 500;color: #646cff;text-decoration: inherit;
}
a:hover {color: #535bf2;
}body {margin: 0;
}

2. 自定义节点 HTML 结构与样式

我们将自定义节点设计为左右分栏结构：

左侧：显示图标（图片）

右侧：显示文本信息（如节点标题）

2.1 HTML 结构示例

<div class="cu_html_container"><img class="cu_html_top" src="icon.png" alt="节点图标" /><div class="cu_html_text"><div class="cu_html_title">节点标题</div></div>
</div>

2.2 对应的 CSS 样式


.cu_html_container {display: flex;              /* 使用 flexbox 实现水平排列 */flex-direction: row;align-items: center;        /* 垂直居中对齐 */justify-content: flex-start;background: white;border: 1px solid #ddd;border-radius: 2px;padding: 8px;height: 50px;               /* 固定高度 */box-shadow: 0 5px 8px rgba(128, 145, 165, 0.1);
}.cu_html_top {width: 30px;                /* 图标宽度 */height: 30px;               /* 图标高度 */margin-right: 10px;         /* 图标与文本之间的间距 */
}.cu_html_text {display: flex;flex-direction: row;align-items: center;flex: 1;                    /* 占满剩余空间 */white-space: nowrap;        /* 防止文本换行 */overflow: hidden;text-overflow: ellipsis;    /* 超出部分用省略号显示 */
}.cu_html_title {font-size: 14px;font-weight: 500;color: #333;line-height: 1.2;overflow: hidden;text-overflow: ellipsis;
}

3. 动态更新节点状态

利用 JavaScript，我们可以根据节点的状态动态更新节点的图标显示。下面的代码示例展示了如何实现这一功能。

export const updateNodeImage = (cell, releaseState) => {// 判断节点状态：若 releaseState 为 "-2" 或 "0" 则表示离线状态const isOffline = releaseState === "-2" || releaseState === "0";// 根据状态选择对应的图片路径const imagePath = isOffline ? '/assets/system/images/dpp/xx.png' : '/assets/system/images/dpp/sx.png';// 获取当前节点数据const currentData = cell.getData();// 构建更新后的数据const newData = {...currentData,releaseState: releaseState,taskParams: {...currentData.taskParams,imagePath: imagePath}};// 更新节点数据cell.setData(newData);
};

说明：

releaseState：用于表示节点当前状态；若值为 “-2” 或 “0” 则认为节点离线。

imagePath：根据节点状态选用对应的图片资源（离线图标或在线图标）。

cell.getData() / cell.setData()：分别用于获取和更新节点的数据。

4. 注册自定义节点到 AntV X6

为了在 AntV X6 图形库中使用自定义节点，我们需要通过其 API 将自定义节点注册。下面的代码展示了如何定义节点的 HTML 结构和图标处理逻辑。

export const useHtmlNode = (node) => {Shape.HTML.register({shape: 'cu-data-node',  // 自定义节点类型名称width: 180,height: 60,html(cell) {// 解构节点数据const { name: nodeName, icon, releaseState, taskParams } = cell.getData();// 创建节点外层容器const htmlContainer = document.createElement('div');htmlContainer.setAttribute('class', 'cu_html_container');// 创建图标元素const htmlTop = document.createElement('img');htmlTop.setAttribute('class', 'cu_html_top');// 图标处理：优先使用 taskParams.icon，否则使用 icon 字段let iconSrc = taskParams.icon || icon;if (iconSrc && iconSrc.startsWith('data:image')) {htmlTop.setAttribute('src', iconSrc);} else if (iconSrc) {// 如果图标不是 base64 格式，则进行转换DataUri.imageToDataUri(iconSrc, function (nu, url) {htmlTop.src = url;// 将转换后的 base64 图标存回节点数据中const newData = {...cell.getData(),taskParams: { ...taskParams, icon: url }};cell.setData(newData);});}// 创建文本区域const htmlText = document.createElement('div');htmlText.setAttribute('class', 'cu_html_text');// 创建并设置节点标题const htmlTitle = document.createElement('div');htmlTitle.setAttribute('class', 'cu_html_title');htmlTitle.innerText = nodeName;// 组合文本区域和图标到容器中htmlText.appendChild(htmlTitle);htmlContainer.appendChild(htmlTop);htmlContainer.appendChild(htmlText);return htmlContainer;}});
};

Shape.HTML.register：AntV X6 提供的接口，用于注册自定义 HTML 节点。

该函数定义了节点的宽度、高度和 HTML 生成逻辑，确保节点的图标与文本能够正确显示。

图标来源优先取自 taskParams.icon，若不存在则使用 icon 字段。