Open gesinn-it-gea opened 4 weeks ago
you should be able to use the following https://visjs.github.io/vis-network/docs/network/edges.html in the edges
key of graphOptions
I already looked at the options but I don't see something out-of-the-box. I think this requires some logic in the extension code and the rendering part.
Something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
float: left;
}
#legend {
margin-left: 20px;
float: left;
}
.legend-item {
margin-bottom: 10px;
}
.legend-color {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<div id="legend"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
]);
// Create an array with edges and assign colors
var edgeColors = ["#ff0000", "#00ff00", "#0000ff"];
var edges = new vis.DataSet([
{from: 1, to: 2, color: edgeColors[0], label: "Edge 1-2"}, // Red edge
{from: 2, to: 3, color: edgeColors[1], label: "Edge 2-3"}, // Green edge
{from: 3, to: 1, color: edgeColors[2], label: "Edge 3-1"}, // Blue edge
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges.map(function(edge, index) {
return {
from: edge.from,
to: edge.to,
color: {color: edgeColors[index]}, // Assign the color
label: "", // Hide the label on the edge
};
})
};
var options = {};
var network = new vis.Network(container, data, options);
// Create the legend
var legendContainer = document.getElementById('legend');
edges.forEach(function(edge, index) {
var legendItem = document.createElement('div');
legendItem.className = 'legend-item';
legendItem.innerHTML = '<span class="legend-color" style="background-color:' + edgeColors[index] + '"></span>' + edge.label;
legendContainer.appendChild(legendItem);
});
</script>
</body>
</html>
@gesinn-it-gea I'm sorry for delay, here https://test.knowledge.wiki/SemanticGraph
I've set the edge font color and strokeColor to transparent from here https://test.knowledge.wiki/MediaWiki:KnowledgeGraphOptions
then you should be able to set specific background color for each property using the parameter property-options?[property label]
and creating a javascript file in the MediaWiki namespace as shown here https://www.mediawiki.org/wiki/Extension:KnowledgeGraph#Graph_options for each of them
Is there already an option to use colors and a legend for edges instead of labels? This would make the diagrams much clearer.