如何在 vis.js 中更改导航按钮颜色

Question

如何在 vis.js 中更改导航按钮颜色

Jso*_*tes 3 html javascript css vis.js vis.js-network

我使用 vis.js 创建了一个自定义网络，并将其样式化为具有红色边缘和蓝色节点。我添加了 css/network/images/....png 文件夹，该文件夹随 vis.js 的下载一起提供，其中包含导航按钮。

但是，默认情况下这些是绿色的。我曾尝试通过 vis.css 文件使用background-color: black;和更改它们color: black。当我为做第一个时background-color，它确实在导航按钮后面添加了一个黑色圆圈，但它仍然是绿色的。

我怎样才能解决这个问题？它在他们的网站上说，导航按钮可以通过重载 css 来完全自定义，但似乎并非如此。任何指针或帮助将不胜感激，谢谢。

Answer 1

moj*_*xel 8

导航按钮目前以图像形式发布。如果要更改颜色，则必须更改这些图像。

你也可以用一些漂亮的 css 替换可见按钮图像：

// create an array with nodes
var nodes = [
  {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'}
];

// create an array with edges
var edges = new vis.DataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  interaction: {
    navigationButtons: true
  }
};

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

Run Code Online (Sandbox Code Playgroud)

#mynetwork {
  width: 600px;
  height: 200px;
}

div.vis-network div.vis-navigation div.vis-button.vis-up, 
div.vis-network div.vis-navigation div.vis-button.vis-down, 
div.vis-network div.vis-navigation div.vis-button.vis-left, 
div.vis-network div.vis-navigation div.vis-button.vis-right, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
  background-image: none !important;
}

div.vis-network div.vis-navigation div.vis-button:hover {
  box-shadow: none !important;
}

.vis-button:after {
  font-size: 2em;
  color: gray;
}

.vis-button:hover:after {
  font-size: 2em;
  color: lightgray;
}

.vis-button.vis-up:after {
  content: "?";
}

.vis-button.vis-down:after {
  content: "?";
}

.vis-button.vis-left:after {
  content: "?";
}

.vis-button.vis-right:after {
  content: "?";
}

.vis-button.vis-zoomIn:after {
  content: "+";
  font-weight: bold;
}

.vis-button.vis-zoomOut:after {
  content: "?";
  font-weight: bold;
}

.vis-button.vis-zoomExtends:after {
  content: "?";
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-network.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-network.min.css" rel="stylesheet" />
</head>
<body>
  <div id="mynetwork"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，4 月前
查看次数：	2034 次
最近记录：	7 年，11 月前