A Vis.js layout extension for formatting nodes in a sequence or group sequence.

Features

• Aggregate the nodes in groups
• Use a "head" node to display the group's name
• Select which node's property should be used to grouping

Screenshot

Groups activated

Groups disactived

Requirements

Updated versions of these toolsets may break the build or app. If you have issues, try mirroring these exact versions.

• Vis.js 7.6.4

Getting Started

Online access

Click on the on the link below for seeing this tool in action.

https://thiagodnf.github.io/visjs-extras-groupsequence/

Usage

Include the javascript file in your html file

<script type="text/javascript" src="src/group-sequence.js"></script>

and call the class before sending the nodes the vis-network

let gsOptions = {};

let layout  = new GroupSequence(gsOptions);

graph = layout.process(graph);

var data = {
    nodes: new vis.DataSet(graph.nodes),
    edges: new vis.DataSet(graph.edges)
};

var options = {
    physics: false
};

var network = new vis.Network($container[0] , data, options);

Warning! Don't forget to set physics: false

Parameters

The default options are:

let defaultOptions = {
    horizontalSpacing: 120,
    verticalSpacing: 100,
    useHead: true,
    useGroups: true,
    sortGroups: true,
    sortNodeIds: true,
    direction: "LR",
    smoothRoundnessRange: 0.09,
    useSmooth: true,
    groupNodeBy: "group",
}

The individual options are explained below.

Name	Type	Default	Description
horizontalSpacing	number	120	The horizontal distance among nodes
verticalSpacing	number	100	The vertical distance among nodes
useHead	boolean	true	Active the use of head nodes
useGroups	boolean	true	Active the use of groups
sortGroups	boolean	true	Active if the groups should be sorted
sortNodeIds	boolean	true	Active if the nodes should be sorted
direction	string	"LR"	Define the direction. Available options LR and RL
smoothRoundnessRange	number	0.09	The size of edge's roundness
useSmooth	boolean	true	Active the use of edge's smooth
groupNodeBy	string	"group"	Define the properties used for grouping

Questions or Suggestions

Feel free to create issues here as you need

Contribute

Contributions to the this project are very welcome! We can't do this alone! Feel free to fork this project, work on it and then make a pull request.

Authors

• Thiago Ferreira - Initial work

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details

Donate

I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:

Thanks! ❤️