自定义 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 字段。
5. 总结
通过本教程，你学会了如何：
使用 CSS 设置基础样式和布局；
构建一个包含图标和文本的自定义 HTML 节点；
利用 JavaScript 动态更新节点状态（如上下线状态）来改变图标显示；
将自定义节点注册到 AntV X6 图形库中，方便在可视化图表中使用。
这种方法不仅使节点外观得以灵活定制，还能实时响应状态变化，提升交互性和用户体验。希望本教程能帮助你快速上手，实现个性化的图表展示！
