I recently had to create an interactive tree diagram displaying companies and their subsidiaries and the business requirements specified something "prettier" than I could achieve by styling a nested HTML list. Additionally I had to support Internet Explorer 8, which does not have Canvas or SVG support. Pondering the problem I remembered hearing on The Changelog of a client-side drawing library called Raphaël. Raphaël provides an abstraction over SVG on browsers that support it and on IE does the same thing using VML and thus giving me the ability to draw pictures in the browser going all the way back to IE 6.
So armed with the ability to draw I created my tree. Most of the new client-side code that I am writing today is in CoffeeScript so that is what I used here. The following is my main drawing routine:
And then some code to create some sample data and call it:
See it in action here
I'll post the zipped code shortly.
This comment has been removed by the author.
ReplyDeletei am creating tree structure using Raphael.js but i am facing some problem could you please help me to resolve my problems:
ReplyDelete1. how to set the child rectangle node positions relative to parent node (right now child nodes are overlapping each other )
2. Show respective child rectangle nodes list only when user click on respective parent rectangle. ( for example we have to display 'English','maths','science' rectangle nodes list when user click on 'subjects'(parent node) with some animate effect).
3.Paths between the nodes are not interconnected if i am applying 'Transform' effect.
My code: http://jsfiddle.net/chandrakanth/9MNz6/9/
Thank you for sharing. I understand this a little, but now I will understand how to make the diagram. I often use beautiful patterns http://charts.poweredtemplate.com/powerpoint-diagrams-charts/ppt-tree-diagrams/0/index.html. Theoretically, you can see the code for the diagrams that would do something like that. Maybe it will be interesting. Good luck to you.
ReplyDelete