5

我用 vis.js 创建了一个自定义网络，并将其设置为具有红色边缘和蓝色节点。我添加了 vis.js 下载附带的 css/network/images/....png 文件夹，其中包含导航按钮。

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

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

4

1 回答 1

10

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

你也可以用一些漂亮的 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>

于 2017-07-25T15:17:41.737 回答