vis.js 网络操作：将节点标签拆分到不同的行答案

【问题标题】：vis.js Network Manipulation: Split Node label onto different linesvis.js 网络操作：将节点标签拆分到不同的行
【发布时间】：2017-12-27 20:32:56
【问题描述】：

我正在使用 vis.4.18.1。
我有一个交互式图表，可以通过使用addNode() 和editNode() 在地图上单击来添加或编辑节点。
如何在多行上设置节点标签？
我正在使用弹出式表单收集标签数据。
我知道这可以在使用换行符创建地图时导入初始图表数据时完成，但这不能以交互方式工作并且节点标签看起来像：
'约翰·史密斯\n出生日期'。
我也尝试将节点字体设置为 multi 并使用 html br 但这也不起作用。

【问题讨论】：

标签： vis.js vis.js-network

【解决方案1】：

你有没有尝试过类似的方法：

node.username = "John Smith";
node.dateOfBirth = "Jun 18th 1978";
node.label = node.username + "\n" + node.dateOfBirth;

您可以通过非 visJS 节点/数据集固有的属性来扩展您的节点对象。也许这样您就可以解决您的问题。

编辑：我刚刚测试了这个示例，其中 node.label = node.title 在初始渲染中并在选择节点时展开。

function expandNode(selectedNode){
  selectedNode.label = selectedNode.title + '\n' + 'a' + '\n' + 'b' + '\n' + selectedNode.problem;
  nodesObj.update(selectedNode); 
}

network.on('select', function(selection){
  let selectedNodes = nodesObj.get(selection.nodes); // nodesObj is a visjs dataSet
  if(selection.nodes.length === 1){
    expandNode(selectedNodes[0]);
  }
}

折叠和展开节点

【讨论】：

嗨。感谢您的回复。我已经尝试过了，它在一行中显示多个字符串，并带有如上所述的换行符。
你能提供一个重现你的问题的小提琴吗？我用一个简短的示例扩展了原始回复，该示例实现了您正在寻找的行为。
美女！你的例子让我重新思考了我现有的尝试，它现在有效 - 非常感谢！
我喜欢这种技术...保持网络整洁并根据需要显示额外信息。为了完成这项工作，我必须在最后一行做一个小的语法更改来关闭对network.on 的调用。我把最后一行改成});