We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create simple "MindMap" diagram

Thread ID:

Created:

Updated:

Platform:

Replies:

129894 Apr 7,2017 03:18 PM UTC Apr 26,2017 04:09 AM UTC JavaScript 10
loading
Tags: ejDiagram
Milos
Asked On April 7, 2017 03:18 PM UTC

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 [Syncfusion]
Replied On April 10, 2017 10:14 AM UTC

Hi Milos, 

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

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
Replied On April 18, 2017 06:56 AM UTC

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 [Syncfusion]
Replied On April 19, 2017 04:00 AM UTC

Hi Milos, 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G 


Milos
Replied On April 20, 2017 01:49 PM UTC

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 [Syncfusion]
Replied On April 21, 2017 12:45 PM UTC

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.  
  
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; 
            } 
        } 
 
 
Regards, 
Shyam G 


Milos
Replied On April 22, 2017 08:13 PM UTC

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 [Syncfusion]
Replied On April 24, 2017 11:11 AM UTC

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. 


Regards, 
Kameshwaran R. 


Kameshwaran R [Syncfusion]
Replied On April 24, 2017 11:30 AM UTC

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.  
 

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
Replied On April 25, 2017 09:33 AM UTC

Hi Kameshwaran,

It is perfect, works exactly as I wanted.
Thank you so much.

Regards,
Milos

Shyam G [Syncfusion]
Replied On April 26, 2017 04:09 AM UTC

Hi Milos, 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;