Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted.
My solution has 5 files
- prototype.js
This is a handy javascript framework. You can download the latest version from there website (www.prototypejs.org/download). I am using this to simply handle the onload event in the page. - circle.html
- script.js
- node-main-left.gif
- node-sub-left.gif
The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”.
This is how the html file looks(circle.html).
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script language="javascript" xml:space="preserve">
// <![CDATA[
Event.observe(window, 'load', showTree);
// ]]>
</script>
<style type="text/css">
.asso-content {
margin-left: 10px;
height: 200px;
overflow: auto;
}
.node-main div, .node-sub div {
float: left;
}
.node-content {
line-height: 29px;
text-indent: 5px;
border: solid 1px #cccccc;
border-left: none;
background-color: #ffffff;
padding-right: 3px;
}
.node-sub {
position: absolute;
}
</style>
<title>Association Tree</title>
</head>
<body>
<div id="assoContent" class="asso-content">
</div>
</body>
</html>
The script.js file contain the logic to create the nodes in circle. The whole logic is base on the following principle.
This is the script.js file
function showTree() {
var assoContent = document.getElementById('assoContent');
//Define the center of the circle (cs,cy)
var cx = 100;
var cy = 100;
//Place the main node on the center of the circle (cx,cy)
var main_node = "";/foo/bar
assoContent.innerHTML = main_node;
//This has to be get from the server side
var n = 6; //Number of child nodes
var r = 100; //The radious of the circle
//Calculate n if the number of child nodes are grater than 10
if (n > 10) r = r + r * n;
var cone = 2 * (22 / 7) / n;
//Finding the cordinates of the points and show them
var x,y,new_node;
for (var i = 0; i < x =" cx" y =" cy" x =" Math.round(x);" y =" Math.round(y);" new_node =" document.createElement('DIV');" csstext = "margin-left:" classname = "node-sub" innerhtml =" ">/foo/bar"
assoContent.appendChild(new_node);
}
}
Please read the in-line comments in the script.js file.
The two images (node-main-left.gif, node-sub-left.gif) are here respectively.
Download code from
http://sites.google.com/site/chanaka3d/Home/code.zip?attredirects=0
8 comments:
Seems the code-box is breaking the circle.js
Do you have a demo link?
Sorry.I haven't got a demo for this. But you can download the code from the following url.
http://download42.mediafire.com/fyytzetn3gsg/m3m5nmmynza/code.zip
And one more thing..
The lines connecting each element is not implemented on this code.
Nice post machang!
Couple of questions:
1. So how do you display the lines relating ea. child to the parent?
2. Does the code allow for variable sized nodes?
Thanks - wg
we have lots of polo shirts
Abercrombie Fitch
clothing
Abercrombie Fitch
hoodile
ralph lauren shirts
Columbia
Jacket
north face jackets
spyder ski
jacket
polo shirts
polo shirt
spyder jackets
mens jacket
mens spyder jackets
spyder jackets for cheap
spyder ski jacket
womens spyder jackets
ralph lauren
spyder jackets cheap
spyder jackets for men
cheap spyder jackets
north face
jackets
discount spyder jacket
the north face
jacket
ralph lauren polo shirts on
sale
discount ralph lauren polo
shirts
ralph lauren shirts
ralph lauren polo discount
ralph lauren polo sale
ralph lauren
polo shirts
ralph lauren polo wholesale
north face jackets
north face jacket
Columbia
Jacket
ralph lauren jacket
Abercrombie Fitch hoodile
Abercrombie Fitch
clothing
abercrombie fitch
abercrombie
fitch
welcom to our store.
Once upon a time, there was a mouse father.He wanted to marry his daughter to the greatest person in the world.But, who was the greatest person in the world?Oh!
puma ferrari shoes
cheap nike shoesThe sun! He must be the greatest person in the world.The mouse father went to talk to the sun."Hello! Mr. Sun.
puma shoes
ferrari shoes
I know you are the greatest person in the world.Would you marry my daughter?""What? I'm not the greatest person in the world. The greatest person is the cloud.If he comes out, I’ll be covered."
nike shox nz
Ugg Boots
The mouse father went to talk to the cloud. “Hello! Mr. Cloud. I know you are the greatest person in the world. Would you marry my daughter?”
nike 360 air max
nike shox shoes
“What? I’m not the greatest person in the world. The greatest person is the wind.If he comes out, I’ll be blown away.”
cheap puma shoes
puma drift cat
The mouse father went to talk to the wind. “Hello! Mr. Wind. I know you are the greatest person in the world.Would you marry my daughter?” “What? I’m not the greatest person in the world. The greatest person is the wall. If he comes out, I’ll be stopped.”
cheap nike shox
nike air max 360
The mouse father went to talk to the wall. “Hello! Mr. Wall. I know you are the greatest person in the world. Would you marry my daughter?” “What? I’m not the greatest person in the world. The greatest person is YOU, the mouse.” “The greatest person in the world is … mouse?” “Yes, the greatest person in the world is mouse. See? If mouse comes out, I’ll be bit!”
nike air max
pumas shoes
The mouse father was very happy. He finally knew mouse was the greatest person in the world. He would marry his daughter to the handsome mouse next door.
cheap jeans
cheap levis jeans
ed hardy jeans
Nice information,ankara escort
many thanks to the author.Ankara escort
It is incomprehensible to me nowAnkara escort
, but in general,Escort ankara ilan
the usefulness and significance is overwhelming.Ankara escort
Thanks again and good luck!
Antalya escort bayan
became the first designer in Wimbledon's 133-year history to create official uniforms for the tournamentescort ankara
As part of this year's event, which starts next week.
will introduces the first ...Escort ankara
determinationEscort ankara
to maintain and enhance the values for which our two brands are famous throughout the world.Eskort ankara
The rugby ralph lauren brand brings to Wimbledon the look of timeless elegance,Escort ankara
drawing on our rich history and traditionsEscort ankara
expert and i like your blog and the information you have
mentioned in this post about the Google tools is really great!
escort bayan
escort
escort istanbul
Bayan Escort
escort bayan ankara
escort bayan ankara
escort ankara ilan
Escort bayan antalya
Ankara escort bayan
Escort Bayan Ankara
Ankara Escort,
antalya escort
Thanks for sharing. Very impressive
Hey this is a great post How do you calculate the cone? whats the details on that
Post a Comment