我用vis.js创建了一个自定义网络，并将其设置为红色边缘和蓝色节点。我添加了下载带有导航按钮的vis.js附带的css / network / images / .... png文件夹。
但是，默认情况下这些是绿色的。我试过用background-color: black;和color: black通过vis.css文件更改它们。当我为background-color做第一个时，它确实在导航按钮后面添加了一个黑色圆圈，但它仍然是绿色的。
我怎样才能解决这个问题？它在他们的网站上说导航按钮可以通过重载css完全自定义，但似乎并非如此。任何指针或帮助将不胜感激，谢谢。
导航按钮目前作为images发布。如果要更改颜色，则必须更改这些图像。
你也可以用一些不错的CSS代替vis-button图像：
// 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);#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: "⤧";
}<!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>