如何将JS中vis.DataSet的nodes标签替换为div内span列表内容？

实现步骤 #

1. 更新HTML结构 #

在页面中添加存储标签的span列表（可放在可视化容器外方便维护）：

<div id="tag-source">
  <span>Pop</span>
  <span>Alternative</span>
  <span>Rock</span>
  <span>Jazz</span>
  <span>Hits</span>
  <span>Dance</span>
  <span>Metal</span>
  <span>Experimental</span>
  <span>Rap</span>
  <span>Electronic</span>
</div>
<div id="bubbles"></div>

2. 修改JS代码生成动态节点 #

替换原有的固定节点初始化逻辑，改为从DOM中提取span文本生成节点数据：

// 从span列表提取标签，生成vis.js所需的节点数组
const spanElements = document.querySelectorAll('#tag-source span');
const nodeData = Array.from(spanElements).map(span => ({
  label: span.textContent.trim()
}));

// 用动态数据初始化DataSet
var nodes = new vis.DataSet(nodeData);
var edges = new vis.DataSet();

// 以下原有代码保持不变
var container = document.getElementById('bubbles');
var data = {
  nodes: nodes,
  edges: edges
};

var options = {
  nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
  physics: {
    stabilization: false,
    minVelocity:  0.01,
    solver: "repulsion",
    repulsion: {
      nodeDistance: 40
    }
  }
};
var network = new vis.Network(container, data, options);


// Events
network.on("click", function(e) {
  if (e.nodes.length) {
    var node = nodes.get(e.nodes[0]);
    // Do something
    nodes.update(node);
  }
});

3. 可选：隐藏标签源容器 #

如果不需要在页面显示span列表，添加CSS隐藏：

#tag-source {
  display: none;
}

关键逻辑说明 #

• document.querySelectorAll('#tag-source span')：选中所有目标span元素
• Array.from(spanElements).map(...)：将DOM节点集合转为数组，遍历生成符合vis.DataSet要求的节点对象（每个对象包含label属性）
• 可视化初始化、物理参数等原有逻辑完全复用，仅替换节点数据源即可

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