自定義 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 圖形庫中，方便在可視化圖表中使用。

這種方法不僅使節點外觀得以靈活定制，還能實時響應狀態變化，提升交互性和用戶體驗。希望本教程能幫助你快速上手，實現個性化的圖表展示！