![](\"https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/multiple_parents_app.png\" "\\"Node")
<\/a><\/p>\nIn order to build this application we use MindFusion Diagramming for JavaScript library.<\/a><\/p>\n I. General Settings<\/strong><\/p>\n In a web page we add the code that initializes a Canvas. We give the Canvas an id:<\/p>\n We add references to the two JavaScipt files that provide the diagramming functionality: MindFusion.Diagramming and MindFusion.Common. We also add a reference to a code-behind file that contains the JavaScript code for our application:<\/p>\n We have placed those files in a subfolder called Scripts, which is located in our main application folder.<\/p>\n II. Diagram Settings<\/strong><\/p>\n We create the diagram in the window.onload event handler. We want to be sure that all scripts are loaded:<\/p>\n We create the Diagram<\/a> using a reference to the DOM element of the Canvas from the web page. We set its allowInplaceEdit<\/a> property to true, which lets users edit interactively nodes and links. We use showGrid<\/a> to render a background grid that helps to align nodes and links. We setRoundedLinks<\/a> and give the diagram a big work are with the setBounds<\/a> method.<\/p>\n II. Creating the Diagram Nodes<\/strong><\/p>\n We create the DiagramNode<\/a> -s in a separate method, which we call after the control is created and all settings are made:<\/p>\n We initialize a list, where we will store dynamically those nodes that we want to have reference to. At first we create 5 ShapeNode<\/a> -s that are the first level of the tree. We use the createShapeNode<\/a> method of Factory<\/a> to create the ShapeNode<\/a> -s and DiagramLink<\/a> -s. Note that we will create all nodes with equal bounds. We don’t have to worry about their location because we will apply an automatic layout at the end.<\/p>\n Factory is available through the getFactory<\/a> method of Diagram<\/a> You do not usually create the class but get an instance of it through the Diagram<\/a> instance.<\/p>\n We use setShape to provide the id af the diagram shape that we want the node to take. A list with the diagram shapes available, together with their id-s can be found in the online help.<\/a><\/p>\n We also use setBrush<\/a> to specify the fill of the ShapeNode . In our case we use a SolidBrush<\/a> ,but there are other options to choose from.<\/p>\n We create then a single ShapeNode<\/a> that will be the next level:<\/p>\n We color it in a slightly lighter shade of green than the nodes at the first level. We then use the Factory<\/a> class once again to create the DiagramLink<\/a> -s between the 5 nodes at the first level and this one single node at the second level:<\/p>\n The setText<\/a> and setHeadShape<\/a> methods of the DiagramLink<\/a> class allow us to specify the label of the link and its shape at the end. There is also setBaseShape<\/a> that allows us the specify the shape at the start of the DiagramLink<\/a>.<\/p>\n The lovely thing about the Factory<\/a> class is that it adds automatically the newly created DiagramItem<\/a> -s, such as nodes and links, to the items<\/a> collection of the diagram. You can find the newly created DiagramNode -s and DiagramLink -s also as members of the nodes<\/a> and links<\/a> collections respectively.<\/p>\n Now we have 5 links coming from all 5 nodes from the first level that point to the second level:<\/p>\n We go on doing the rest of the diagram in the same way. We create ShapeNode<\/a> -s with Factory<\/a> and then bind the nodes with Factory<\/a> .<\/p>\n III. Layout<\/strong><\/p>\n We use the LayeredLayout<\/a> to arrange all nodes of the diagram. Since the diagram is not a typical tree, we prefer the LayeredLayout<\/a> to the TreeLayout<\/a><\/p>\n It is really easy to apply any other algorithm on the diagram – you just need to create an instance of it and call the arrange method of your diagram to apply this instance. You can quickly change layouts and experiment to see which one provides the best result.<\/p>\n In our case the LayeredLayout<\/a> looks fine and with this we are done building the tree.<\/p>\n You can download the sample together with all libraries used from the following link:<\/p>\n A JavaScript Graph with Nodes that Have Multiple Parents<\/a><\/p>\n Technical support is available through MindFusion forum here.<\/a><\/p>\n About Diagramming for JavaScript:<\/i> This native JavaScript library provides developers with the ability to create and customize any type of diagram, decision tree, flowchart, class hierarchy, graph, genealogy tree, BPMN diagrams and much more. The control offers rich event set, numerous customization options, animations, graph operations, styling and themes. You have more than 100 predefined nodes, table nodes and more than 15 automatic layout algorithms. Learn more about Diagramming for JavaScript at https:\/\/mindfusion.dev\/javascript-diagram.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Most tree structures are built as hierarchies: the number of nodes increases at each level. In our sample we will look at a tree, where not all branches have a higher number of nodes than their predecessors. In our tree … Continue reading <div style=\"overflow: visible; height: 100%; margin: 1px; padding: 0px;\">\n <canvas id=\"diagram\" width=\"2100\" height=\"2500\">\n This page requires a browser that supports HTML 5 Canvas element.\n <\/canvas>\n<\/div><\/pre>\n
<script src=\"Scripts\/MindFusion.Common.js\" type=\"text\/javascript\"><\/script>\n<script src=\"Scripts\/MindFusion.Diagramming.js\" type=\"text\/javascript\"><\/script>\n<script src=\"MultipleParentNodes.js\" type=\"text\/javascript\"><\/script><\/pre>\n
window.onload = function(e)\n{\n var diagramEl = document.getElementById('diagram');\n \/\/ create a Diagram component that wraps the \"diagram\" canvas\n diagram = AbstractionLayer.createControl(Diagram, null, null, null, diagramEl);\n diagram.setAllowInplaceEdit(true);\n diagram.setRouteLinks(true);\n diagram.setShowGrid(true);\n diagram.setRoundedLinks(true);\n diagram.setBounds(new Rect(0, 0, 2000,2500));\n}<\/pre>\nfunction onLoaded()\n{\n var nodes = {};\n\n for(var i = 0; i < 5; i++)\n {\n nodes[i] = diagram.getFactory().createShapeNode(new Rect(20, 20, 20, 12));\n nodes[i].setShape('Rectangle');\n nodes[i].setBrush({ type: 'SolidBrush', color: '#567939' });\n };<\/pre>\nvar node5 = diagram.getFactory().createShapeNode(new Rect(20, 20, 20, 12 ));\nnode5.setShape('Rectangle');\nnode5.setBrush({ type: 'SolidBrush', color: '#6f9c49' });<\/pre>\n for(var i = 0; i < 5; i++)\n { \n var link = diagram.getFactory().createDiagramLink(nodes[i], node5);\t\n link.setHeadShape(\"Triangle\");\n link.setText(\"20%\");\n link.setHeadShapeSize(3.0);\n link.setHeadBrush({ type: 'SolidBrush', color: '#7F7F7F' });\n };<\/pre>\n![\"Node](\"https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/node_multiple_parents.png\")
<\/p>\nvar lLayout = new MindFusion.Graphs.LayeredLayout();\ndiagram.arrange(lLayout);<\/pre>\n