Edges width in hover and select way to big #2212
Description
Sorry in case I missed something, I am a beginner with vis.js.
The options for nodes and edges in hover or select should adjust the width. However, this setting seems to be ignored. If the edges are defined to be a bit thicker, they become way too wide when hovering or selecting. Either I overlooked an option, or it's a bug.
hoverWidth and selectionWidth are described here:
https://visjs.github.io/vis-network/docs/network/edges.html
But browser said naaa....
Unknown option detected: "hoverWidth" in
options = {
nodes: {
hoverWidth
}
}
Unknown option detected: "selectionWidth" in
options = {
nodes: {
selectionWidth
}
}
Here is the code for testing:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.js"></script>
<style type="text/css">
#network {
width: 100%;
height: 90%;
border: 1px solid #aaa;
margin-bottom: 10px;
}
.layoutContainer {
display: flex;
height: 100vh;
flex: 1;
padding: 10px;
}
</style>
</head>
<body>
<div class="layoutContainer">
<div id="network"></div>
</div>
<script>
var dataNodes = [
{ "id": 1, "label": "A", "data": "Text", "size": 10, "borderWidth": 1 },
{ "id": 2, "label": "B", "data": "Text", "size": 40, "borderWidth": 8 },
{ "id": 3, "label": "C", "data": "Text", "size": 30, "borderWidth": 5 },
{ "id": 4, "label": "D", "data": "Text", "size": 20, "borderWidth": 2 },
{ "id": 5, "label": "E", "data": "Text", "size": 50, "borderWidth": 10 },
];
var dataEdges = [
{ "id": 1, "from": 2, "to": 1, "arrows": "to", "width": "7", "label": "A", "data": "Text", },
{ "id": 2, "from": 3, "to": 2, "arrows": "to", "width": "3", "label": "B", "data": "Text", },
{ "id": 3, "from": 4, "to": 1, "arrows": "to", "width": "2", "label": "C", "data": "Text", },
{ "id": 4, "from": 5, "to": 1, "arrows": "to", "width": "1", "label": "D", "data": "Text", },
];
var options = {
autoResize: true,
clickToUse: false,
nodes: {
size: 20,
},
edges: {
width: 2,
hoverWidth: 0.5,
selectionWidth: 0.5,
},
layout: {
randomSeed: 2,
},
interaction: {
selectable: true,
multiselect: true,
selectConnectedEdges: true,
hover: true,
hoverConnectedEdges: true,
},
physics: {
enabled: true,
barnesHut: {
springConstant: 0,
avoidOverlap: 0.2,
},
repulsion: {
nodeDistance: 150,
springLength: 300,
springConstant: 0.02,
},
solver: 'repulsion',
stabilization: {
iterations: 2000,
updateInterval: 25,
}
},
};
var network;
var nodes;
var edges;
var container;
document.addEventListener('DOMContentLoaded', function() {
nodes = new vis.DataSet();
edges = new vis.DataSet();
container = document.getElementById('network');
network = new vis.Network(container, { nodes: nodes, edges: edges }, options);
nodes.add(dataNodes);
edges.add(dataEdges);
});
</script>
</body>
</html>