Text

Node text is controlled by the text attribute. The text may contain line breaks ("\n").
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>

  <script>
    'use strict';

    var ogma = new Ogma({
      container: "graph-container",
    });

    var TEXT_POSITION = ['center', 'left', 'top', 'right', 'bottom'];

    // Add a rule to specify the text style.
    // Here, the text to display (content property) is based on the id of the node.
    ogma.styles.addNodeRule({
      text: {
        // random text positioning
        position: function (n) { return TEXT_POSITION[n.getId() % 4]; },
        maxLineLength: 140, // truncate
        size: 12,
        color: "black",
        backgroundColor: '#ddd',
        minVisibleSize: 5,
        content: function (n) {
          return "Node " + n.getId();
        }
      }
    });

    ogma.generate.random({ nodes: 15, edges: 0 }).then(function (graph) {
      ogma.setGraph(graph);
      ogma.view.locateGraph();

      ogma.getNode("0").setAttributes({
        text: { color: "#444", style: "bold" },
      });
    }).then(ogma.layouts.grid);


// hide node texts
//ogma.styles.setNodeTextsVisibility(false);

  </script>
</body>

</html>