在vis.js-network中隐藏边缘标签

Question

我只想简单地显示/隐藏我的vis.js(网络)边缘的标签--这可能吗？

我有已尝试来更新vis.js-数据结构中的边缘：

• 删除label属性-不工作
• 将label设置为undefined -不工作
• 将label设置为'' -不工作
• 将label设置为' ' - works

我更喜欢某种网络切换，但我还没有找到。

有更好的方法吗？

Answer 1

更新每个边缘上的label属性的另一种方法是将所有边缘的字体颜色更改为透明。setOptions()方法可用于更新选项，并应用网络中的所有边缘。应该更新选项edges.font.color和edges.font.strokeColor，然后返回到它们的原始值以显示边缘。

下面的示例以及https://jsfiddle.net/rk9s87ud/中的示例。

​

var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

var edges = new vis.DataSet([
  { from: 1, to: 2, label: 'Edge 1' },
  { from: 2, to: 3, label: 'Edge 2' },
  { from: 3, to: 4, label: 'Edge 3' },
  { from: 4, to: 5, label: 'Edge 4' },
]);

var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  edges: edges,
};

var options = {
  nodes: {
    // Set any other options, for example node color to gold
    color: 'gold'
  },
  edges: {
    font: { 
      // Set to the default colors as per the documentation
      color: '#343434',
      strokeColor: '#ffffff'
    }
  }
}

var hiddenEdgeTextOptions = {
  edges: {
    font: {
      // Set the colors to transparent
      color: 'transparent',
      strokeColor: 'transparent'
    }
  }
};

var network = new vis.Network(container, data, options);

var displayLabels = true;
document.getElementById('toggleLabels').onclick = function() {
  if(displayLabels){
    // Apply options for hidden edge text
    // This will override the existing options for text color
    // This does not clear other options (e.g. node.color)
    network.setOptions(hiddenEdgeTextOptions);
    displayLabels = false;
  } else {
    // Apply standard options
    network.setOptions(options);
    displayLabels = true;
  }
}

#mynetwork {
  width: 600px;
  height: 160px;
  border: 1px solid lightgray;
}

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<button id="toggleLabels">Toggle labels</button>
<div id="mynetwork"></div>

​