D3 Network

Content Type: Widget
Categories: User Interface


Pluggable widget to visualize a network as interactive nodes with links between them. Based on the D3-force(v6) library.


Demo urlhttps://youtu.be/drHaKyYEAbc

To setup your the interactive network widget you need to connect two persistent or non-persistent entities. This can be done directly from the database, but also through a micro or nanoflow. The first entity will represent your node objects, this entity needs an ID attribute and can have a name attribute. The second entity represents the links between the nodes, it will need one attribute to store the nodeID of the source node of the link and a second attribute to store the nodeID of the target node of the link.

You can add multiple networks on the same page, each network gets class names based on name of the widget. These classnames can be used for styling the network.

It is possible to pan and zoom the entire network and drag specific nodes.


Version: 2.0.0
Framework Version: 8.15.0
Release Notes: - Added more shape options, rectangles, ellipses and images are now configurable - Option to set styling for nodes/links, add a style attribute to the node or link object and fill it for each node/link with the styling you want, see the test project for examples - Detached the repulsion factor from the node size, it is now an separate attribute
Version: 1.1.0
Framework Version: 8.15.0
Release Notes: - Added on node click action, this can trigger for example an microflow, nanoflow or open a page. - Added option to set the node size. - Added option to set the link thickness.
Version: 1.0.0
Framework Version: 8.15.0
Release Notes: Initial release of the d3 network widget for Mendix.