求助：如何配置visjs使离线节点显示为红色？

因为你是JavaScript新手，我给你最基础、易理解的实现思路和代码：

核心逻辑 #

• 给每个拓扑节点元素加统一类名（比如network-node），方便批量操作
• 实现节点在线状态判断逻辑（可替换为真实检测接口）
• 根据检测结果切换节点样式：离线时添加offline类（设置红色），在线时移除该类

示例代码 #

HTML（拓扑节点结构） #

<!-- 假设你的拓扑节点是如下结构 -->
<div class="network-node" data-node-id="1">节点1</div>
<div class="network-node" data-node-id="2">节点2</div>
<div class="network-node" data-node-id="3">节点3</div>

CSS（样式定义） #

.network-node {
  /* 节点默认在线样式（蓝色示例） */
  background-color: #4285F4;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  margin: 0 8px 8px 0;
}

/* 离线状态样式（红色） */
.network-node.offline {
  background-color: #EA4335;
}

JavaScript（核心逻辑） #

// 模拟节点在线检测逻辑，真实场景替换为后端接口请求或WebSocket状态判断
function isNodeOnline(nodeId) {
  // 这里用随机数模拟在线/离线，实际请根据业务逻辑修改
  return Math.random() > 0.5;
}

// 更新所有节点状态的函数
function updateNodeStatuses() {
  const nodes = document.querySelectorAll('.network-node');
  
  nodes.forEach(node => {
    const nodeId = node.dataset.nodeId;
    const isOnline = isNodeOnline(nodeId);
    
    // 根据状态切换样式类
    if (!isOnline) {
      node.classList.add('offline');
    } else {
      node.classList.remove('offline');
    }
  });
}

// 页面加载时初始化状态，之后每30秒刷新一次
window.addEventListener('load', () => {
  updateNodeStatuses();
  setInterval(updateNodeStatuses, 30000); // 30秒刷新一次状态
});

新手提示 #

• 如果你的拓扑图是用第三方库（比如ECharts、D3.js）绘制的，直接修改DOM样式可能无效，需要查阅对应库的节点样式更新API（比如ECharts可修改series.itemStyle属性）
• 真实场景的在线检测，可使用fetch请求后端状态接口，或通过WebSocket长连接实时获取节点状态

内容的提问来源于stack exchange，提问作者1JL