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

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

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

1. 基础样式设置

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

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 图形库中，方便在可视化图表中使用。

这种方法不仅使节点外观得以灵活定制，还能实时响应状态变化，提升交互性和用户体验。希望本教程能帮助你快速上手，实现个性化的图表展示！