JarCasting
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!