如何更改 vis.js 中的导航按钮颜色
how to alter navigation button color in vis.js
我用 vis.js 创建了一个自定义网络,并将其样式设置为具有红色边缘和蓝色节点。
我添加了 css/network/images/....png 文件夹,该文件夹随 vis.js 下载而来,里面有导航按钮。
但是,默认情况下这些都是绿色的。我尝试通过 vis.css 文件更改它们 background-color: black;
和 color: black
。当我为 background-color
做第一个时,它确实在导航按钮后面添加了一个黑色圆圈,但它仍然是绿色的。
我该如何解决这个问题?它在他们的网站上说,通过重载 css 可以完全自定义导航按钮,但事实并非如此。任何指点或帮助将不胜感激,谢谢。
导航按钮当前发布为images。如果您想更改颜色,则必须更改这些图像。
您也可以将 vis-button 图像替换为一些漂亮的图像 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);
#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>
我用 vis.js 创建了一个自定义网络,并将其样式设置为具有红色边缘和蓝色节点。 我添加了 css/network/images/....png 文件夹,该文件夹随 vis.js 下载而来,里面有导航按钮。
但是,默认情况下这些都是绿色的。我尝试通过 vis.css 文件更改它们 background-color: black;
和 color: black
。当我为 background-color
做第一个时,它确实在导航按钮后面添加了一个黑色圆圈,但它仍然是绿色的。
我该如何解决这个问题?它在他们的网站上说,通过重载 css 可以完全自定义导航按钮,但事实并非如此。任何指点或帮助将不胜感激,谢谢。
导航按钮当前发布为images。如果您想更改颜色,则必须更改这些图像。
您也可以将 vis-button 图像替换为一些漂亮的图像 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);
#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>