CODEWITHSUNDEEP
javascriptvis.js
lix joy
lix joy

Reputation: 71

How to apply multiple groups to a node in vis-network?

Assume that there are two group classification methods for people:

group_1 = "teacher",  
group_2 = "student"；
group_a ="male",    
group_b ="female",

The teacher node is represented by a square and the student node is represented by a dot.

The male node is colored in blue and the female node is colored in pink.

How should I design the corresponding vis-network code to achieve this function of supporting multiple groups?

Upvotes: 0

Views: 79

Answers (1)

lix joy
lix joy

Reputation: 71

<!DOCTYPE html>
<html>
<head>
  <title>Vis-Network Multiple Groups</title>
  <script type="text/javascript" src="https://unpkg.com/vis-network/dist/vis-network.min.js"></script>
  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
  <div id="mynetwork"></div>
  <script>
    // Define the data
    var nodes = new vis.DataSet([
      { id: 1, label: 'Teacher Male', group: 'teacher-male' },
      { id: 2, label: 'Teacher Female', group: 'teacher-female' },
      { id: 3, label: 'Student Male', group: 'student-male' },
      { id: 4, label: 'Student Female', group: 'student-female' }
    ]);

    var edges = new vis.DataSet([
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 1, to: 2 },
      { from: 3, to: 4 }
    ]);

    // Define the network options
    var options = {
      nodes: {
        shape: 'dot',
        size: 20,
        font: {
          size: 14,
          color: '#000000'
        },
        borderWidth: 2,
        color: {
          background: '#ffffff',
          border: '#000000'
        }
      },
      groups: {
        'teacher-male': {
          shape: 'box',
          color: {
            background: '#0077b6',
            border: '#003d66'
          }
        },
        'teacher-female': {
          shape: 'box',
          color: {
            background: '#ff69b4',
            border: '#b30059'
          }
        },
        'student-male': {
          shape: 'dot',
          color: {
            background: '#0077b6',
            border: '#003d66'
          }
        },
        'student-female': {
          shape: 'dot',
          color: {
            background: '#ff69b4',
            border: '#b30059'
          }
        }
      },
      edges: {
        color: '#000000',
        width: 2
      },
      layout: {
        hierarchical: {
          direction: 'UD',
          sortMethod: 'directed'
        }
      }
    };

    // Create the network
    var container = document.getElementById('mynetwork');
    var data = {
      nodes: nodes,
      edges: edges
    };
    var network = new vis.Network(container, data, options);
  </script>
</body>
</html>

I asked chatgpt, and the solution it provided required enumerating every possible classification, So I don't think this is a perfect solution.

Upvotes: 0

Related Questions