User defined layouts

Live example: https://vchilkuri.github.io/examples/userdef_layout.html

This example shows the flexibility offered to the user in placing the nodes at a desired location. The example shows all the 5 node labels and their relative co-ordinates with respect to the canvas element defined in the 'nodes; object.

var nodes = [
      { label: "Hello", x: 0, y: 1 },
      { label: "World", x: 1, y: 1  },
      { label: "!", x: 0.5, y: 0  },
      { label: "I am in center", x: 0.5, y: 0.5 },
      { label: "Right bottom corner", x: 1, y: 0 },
    ];

This layout can also be combined with other layouts where some nodes can be randomly placed and some placements of the nodes can be user defined. The x and y attributes are given as a fraction of length and breadth rather than complicating the measurement with pixel address and other nomenclatures. This feature makes the library similar to traditional CSS format simplifying it even to user who are new to programming. The positions of nodes based on the co-ordinates above is shown in the below figure.

results matching ""

    No results matching ""