admin管理员组

文章数量:1295915

I have created a custom network with vis.js and have styled it to have red edges and blue nodes. I added the css/network/images/....png folder that came with the download of vis.js that has the navigation buttons inside.

However, these are green by default. I have tried changing them via the vis.css file with background-color: black; and color: black. When I do the first one for background-color, it does add a black circle behind the navigation button but its still green.

How can I fix this? It says on their website that the nav buttons are fully customizable by overloading the css but it doesnt seem to be the case. Any pointers or help would be appreciated, thank you.

I have created a custom network with vis.js and have styled it to have red edges and blue nodes. I added the css/network/images/....png folder that came with the download of vis.js that has the navigation buttons inside.

However, these are green by default. I have tried changing them via the vis.css file with background-color: black; and color: black. When I do the first one for background-color, it does add a black circle behind the navigation button but its still green.

How can I fix this? It says on their website that the nav buttons are fully customizable by overloading the css but it doesnt seem to be the case. Any pointers or help would be appreciated, thank you.

  • javascript
  • html
  • css
  • vis.js
  • vis.js-network
Share edited Dec 27, 2017 at 12:28 YakovL 8,36513 gold badges73 silver badges112 bronze badges asked Jul 18, 2017 at 23:53 Jason RJason R 4527 silver badges13 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 12

The navigation buttons are currently released as images. If you want to change the color you would have to change these images.

Also you could just replace the vis-button images with some nice 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./ajax/libs/vis/4.20.1/vis-network.min.js"></script>
  <link href="//cdnjs.cloudflare./ajax/libs/vis/4.20.1/vis-network.min.css" rel="stylesheet" />
</head>
<body>
  <div id="mynetwork"></div>
</body>
</html>

本文标签： javascripthow to alter navigation button color in visjsStack Overflow

版权声明：本文标题：javascript - how to alter navigation button color in vis.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741626161a2389094.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。