【问题标题】:Is it possible to set the font color on nodes when selected in vis.js?在 vis.js 中选择时是否可以在节点上设置字体颜色?
【发布时间】:2021-05-14 09:39:56
【问题描述】:

我想在节点被选中时更改它们的外观。我可以更改节点和边框的颜色,但我也想更改文本的颜色。是我遗漏了什么还是增强请求?

【问题讨论】:

  • 我最终自己跟踪选择并切换颜色。谁有更好的主意?

标签: fonts vis.js vis.js-network


【解决方案1】:

改编自answer,与设置选定节点的大小有关:

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

var container = document.getElementById('mynetwork');
var data = { 
  nodes: nodes,
  edges: edges
};
var options = {
  interaction: { hover:true },
  nodes: { font: { size: 14, color: "#000" }}
};
var network = new vis.Network(container, data, options);

network.on("selectNode", function (params) {
  var selectedNodeId = params.nodes[0];
  var node = network.body.nodes[selectedNodeId];
  node.setOptions({
    font: {
      size: 20,
      color: "#ff0000"
    }
  });
});

network.on("deselectNode", function (params) {
  var deselectedNodeId = params.previousSelection.nodes[0];
  var node = network.body.nodes[deselectedNodeId];
  node.setOptions({
    font: {
      size: options.nodes.font.size,
      color: options.nodes.font.color
    }
  });
});
#mynetwork {
  width: 100%;
  height: 100%;
  border: 1px solid lightgray;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css"/>
<div id="mynetwork"></div>

【讨论】:

  • 我最终做了类似的事情。感谢您添加代码示例 Robin!
猜你喜欢
  • 2018-10-06
  • 1970-01-01
  • 2011-03-14
  • 1970-01-01
  • 2014-11-12
  • 1970-01-01
  • 1970-01-01
  • 2019-07-15
  • 1970-01-01
相关资源
最近更新 更多