Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

Multiple root items in chart

Multiple root items are convenient to display multiple hierarchy fragments side by side. For example if our organizational data is incomplete and several nodes reference null parent, chart will show organization structure as it is in from of several disconnected hierarchies placed altogether in diagram. Following example shows two disconnected hierarchies: 

  

Matrix layout of multiple root items

This is another example of dealing with fragments of hierarchies. It is made as nice 3 by 3 array on purpose, but in general if we are in situation when we need to connect broken peaces of diagram having hundreds of disconnected items the matrix representation of them can be way more convenient than long horizontal of vertical stripe of nodes. It is especially true when we need to support drag and drop, since in that case our nodes are going to be relatively close to each other.

In order to layout root items in form of matrix we have to create invisible root item and set its childrenPlacementType option to primitives.common.ChildrenPlacementType.Matrix.

See previous example for placing fragments as vertical or horizontal list.

  

 

Comments 

 
#5 Administrator 2015-05-26 17:54
Quoting Jorrex:
Hi, how can I put multiple root items below each other instead of next to each other?
I cannot seem to make it work ;-)

Click on "Left" button. See matrix layout of multiple root items example
Quote
 
 
#4 Jorrex 2015-05-26 08:48
Hi, how can I put multiple root items below each other instead of next to each other?
I cannot seem to make it work ;-)
Quote
 
 
#3 Root 2014-10-28 02:37
Quoting Administrator:
Quoting Root:
How can I make an root item which is on second layer and not on root layer?
I tried that with an invisible item but then the connector is coming from nowhere which looks strange.

If you see connector going to invisible item which has no visible parent then it is bug.

Meh, how can I fix that?
Quote
 
 
#2 Administrator 2014-10-16 22:55
Quoting Root:
How can I make an root item which is on second layer and not on root layer?
I tried that with an invisible item but then the connector is coming from nowhere which looks strange.

If you see connector going to invisible item which has no visible parent then it is bug.
Quote
 
 
#1 Root 2014-10-14 10:56
How can I make an root item which is on second layer and not on root layer?
I tried that with an invisible item but then the connector is coming from nowhere which looks strange.
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support