Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat (edges): use colors and legend instead of labels #7

Open
gesinn-it-gea opened this issue Aug 14, 2024 · 4 comments
Open

feat (edges): use colors and legend instead of labels #7

gesinn-it-gea opened this issue Aug 14, 2024 · 4 comments
Labels
enhancement New feature or request question Further information is requested

Comments

@gesinn-it-gea
Copy link
Member

Is there already an option to use colors and a legend for edges instead of labels? This would make the diagrams much clearer.

image
@gesinn-it-gea gesinn-it-gea added enhancement New feature or request question Further information is requested labels Aug 14, 2024
@thomas-topway-it
Copy link
Contributor

you should be able to use the following https://visjs.github.io/vis-network/docs/network/edges.html in the edges key of graphOptions

@gesinn-it-gea
Copy link
Member Author

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.

@gesinn-it-gea
Copy link
Member Author

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>

@thomas-topway-it
Copy link
Contributor

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gesinn-it-gea @thomas-topway-it