Create simple "MindMap" diagram

[Milos]

Hi,

I need to create simple diagram, something similar like MindMap (but with the straight line connections) diagram on your online demo: http://js.syncfusion.com/demos/web/#!/bootstrap/diagram/usecasediagrams/mindmap

Is there any simple way to do that. There is a lot of method to implement to this.

I usually make diagrams only with one data array where I set up parent and child Ids and that is it. 

Is it possible with this kind of diagram, something similar as on attached image.

Regards,

Milos

Attachment: Diagrams_cf8c91f8.zip

[Shyam G]

Hi Milos, 

We have created a sample in which we have set the datasource to render the layout. please refer to the JSPlayground link. 

JSPlayground link: http://jsplayground.syncfusion.com/p1kcmege 

In our mindmap sample,we have done some customizations using userhandles. we have removed that in the above sample(JSPlayground link). 

Regards,
Shyam G 

[Milos]

Hi Shyam ,

Thanks for your swift response.

This example is much clearer than other one.

That's exactly what I needed.

Regards,

Milos

[Shyam G]

Hi Milos, 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[Milos]

Hi,

I have some additional questions regarding your example.

Based on example I put my data source there. 

You can see this on playground:   http://jsplayground.syncfusion.com/qfsdyeuo

I have 3 questions here:

1) Nodes in diagram are not well organized. Some connections were drawn over the nodes. How to fix it ?

2) What is the easiest way to add connection label from node in data source "connLabel" in connection line which connects parent to its child nodes. 

3) How to center root node in diagram when diagram is shown. 

Regards,

Milos

[Shyam G]

Hi Milos, 

 

Query	Response
Nodes in diagram are not well organized. Some connections were drawn over the nodes. How to fix it ?	Currently we don’t have automatic line routing support in our diagram control. We have already logged “Line routing support in the diagram control” as a feature and provided the feature link below.      FRLink:http://www.syncfusion.com/support/directtrac/features/JS-8252
What is the easiest way to add connection label from node in data source "connLabel" in connection line which connects parent to its child nodes.	Please use layouts getConnectorSegments to customize the connectors. We have set the label for the connector using this method. Please refer to the code example and JSPlayground link.    Code example:    var layoutdetails = {                 //define getConnectorSegments              getConnectorSegments:getConnectorSegments,                         };    $("#diagram").ejDiagram(          {                             layout: layoutdetails,  });    function getConnectorSegments(diagram, connector) {                          var diagram = $("#diagram").ejDiagram("instance");              if (connector && connector.targetNode) {                  //get the targetNode                  var targetNode = diagram.getNode(connector.targetNode);                  if (targetNode.connLabel) {                      connector.labels[0].text = targetNode.connLabel;                  }              }          }
How to center root node in diagram when diagram is shown.	In your JSPlayground link, you have checked incorrect condition in the nodeTemplate function. So only the offsetX and offsetY for the root node is not set. We have modified your JSplayground link and provided below.    Code example:    function nodeTemplate(diagram, node) {                            . . . .              if (node.displayName === "Root") {                                   node.offsetX = 675;                  node.offsetY = 300;              }          }

 

JSPlayground link:http://jsplayground.syncfusion.com/noc44l5l 

 

Regards, 

Shyam G 

[Milos]

Hi Shyam ,

Thanks for 2) and 3), it is clear now.

For 1):

Link you sent me does not work, it opens just my syncfusion account http://www.syncfusion.com/support/directtrac/features/JS-8252 .

It is strange that nodes in diagram are not arranged well.

I use your demo example for "MindMap" (http://js.syncfusion.com/demos/web/#!/bootstrap/diagram/UsecaseDiagrams/Mindmap ) and just changed 3 simple things for clarification:

       a) set all node.shape = "rectangle"  instead of node.type = "native";

       b) change segment type to 'orthogonal' instead of 'bezier'

       c) add some branch nodes to 'Brainstorm' node, just to be more complicated diagram

Please check here how diagram is perfectly organized:  http://jsplayground.syncfusion.com/jxhlede3.

If we compare it with example http://jsplayground.syncfusion.com/noc44l5l  where nodes are connected pretty confusing, it is exactly I need.

My initial question was how to get something like your "MindMap" syncfusion example, but with less code, more simple (if it is possible).

You gave me great example with less code, but example does not work, does not organized connection and nodes very well like your demo example does.

What is the solution now to make it work ?

What is that crucial difference between two codes: 

      -  example you give me http://jsplayground.syncfusion.com/noc44l5l

      -  and initial syncfusion example http://jsplayground.syncfusion.com/jxhlede3

Can it be fixed with some simple method, or nodes organization ... ?

Regards,

Milos

[Kameshwaran R]

Hi Milos,   

 

We have achieved the mind map sample on our sample browser with port to port connection. However we have achieved your requirement with port to port connection, Please find the below playground link. 

Playground link: http://jsplayground.syncfusion.com/4uqlyifd  

Regards, 

Kameshwaran R. 

[Kameshwaran R]

Hi, 

Please ignore the previous update. 

In mind map sample the connection established with port to port connection and update the layout. We have achieved your requirement with port to port connection here also, Please find the below playground link.  

 

Playground link: http://jsplayground.syncfusion.com/4uqlyifd  

Please find the code snippet. 

        //Initializes diagram control 

        $("#diagram").ejDiagram( 

        { 

              //. . .  

              //. . . 

            layout: { 

                getConnectorSegments:getConnectorSegments 

            }, 

            defaultSettings: { 

                node: { 

                //. . . 

                //Defining port for all nodes 

                    ports: [ 

                        { name: "left", offset: { x: 0, y: .5 } }, 

                        { name: "right", offset: { x: 1, y: .5 } }, 

                        { name: "top", offset: { x: 0.5, y: 0 } }, 

                        { name: "bottom", offset: { x: 0.5, y: 1 } } 

                    ], 

                } 

                //. . . 

                //. . . 

            }, 

        }); 

 

        function getConnectorSegments(diagram, connector) { 

            var diagram = $("#diagram").ejDiagram("instance"); 

            if (connector && connector.targetNode) { 

                //get the targetNode 

                var targetNode = diagram.getNode(connector.targetNode); 

                //. . . 

                //. . . 

 

                if (targetNode.branch === "left" || targetNode.branch === "subleft") { 

                    connector.sourcePort = "left" 

                    connector.targetPort = "right" 

                } 

                else { 

                    connector.sourcePort = "right" 

                    connector.targetPort = "left" 

                } 

            } 

        } 

 

Regards, 

Kameshwaran R. 

[Milos]

Hi Kameshwaran,

It is perfect, works exactly as I wanted.

Thank you so much.

Regards,

Milos

[Shyam G]

Hi Milos, 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G