Skip to content

Commit aaf92f3

Browse files
philogbphilogb
committed
Added new Examples and tweaked existing ones
1 parent 95a7522 commit aaf92f3

File tree

10 files changed

+580
-56
lines changed

10 files changed

+580
-56
lines changed

‎Source/Graph/Graph.Geom.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Graph.Geom = new Class({
2525
translate: function(pos, prop) {
2626
prop = $.splat(prop);
2727
this.viz.graph.eachNode(function(elem) {
28-
$.each(prop, function(p) { elem[p].$add(pos); });
28+
$.each(prop, function(p) { elem.getPos(p).$add(pos); });
2929
});
3030
},
3131
/*

‎Source/Visualizations/Spacetree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,7 @@ $jit.ST= (function() {
422422
'y': move.offsetY
423423
};
424424
if(move.enable) {
425-
this.geom.translate(node.endPos.add(offset).$scale(-1), "endPos");
425+
this.geom.translate(node.endPos.add(offset).$scale(-1), "end");
426426
}
427427
this.fx.animate($.merge(this.controller, { modes: ['linear'] }, onComplete));
428428
},

‎Templates/Spacetree/test10.html‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
$def with (model)
22

3-
<h4>MultiTree</h4>
3+
<h4>Selection Mode</h4>
4+
<table>
5+
<tr>
6+
<td>
7+
<label for="s-normal">Normal </label>
8+
</td>
9+
<td>
10+
<input type="radio" id="s-normal" name="selection" value="normal" />
11+
</td>
12+
</tr>
13+
<tr>
14+
<td>
15+
<label for="s-root">Set as Root </label>
16+
</td>
17+
<td>
18+
<input type="radio" id="s-root" name="selection" checked="checked" value="root" />
19+
</td>
20+
</tr>
21+
</table>

‎Templates/Spacetree/test12.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
$def with (model)
2+
3+
<h4>Actions</h4>
4+
<a id="update" href="#" class="theme button white">Morph Styles</a>
5+
<a id="restore" href="#" class="theme button white">Restore Styles</a>
6+
7+
<h4>Node Styles</h4>
8+
<table>
9+
<tr>
10+
<td>
11+
<label for="r-left">Width </label>
12+
</td>
13+
<td>
14+
<input type="checkbox" id="n-width" checked="checked" />
15+
</td>
16+
</tr>
17+
<tr>
18+
<td>
19+
<label for="r-left">Height </label>
20+
</td>
21+
<td>
22+
<input type="checkbox" id="n-height" checked="checked" />
23+
</td>
24+
</tr>
25+
<tr>
26+
<td>
27+
<label for="r-left">Color </label>
28+
</td>
29+
<td>
30+
<input type="checkbox" id="n-color" checked="checked" />
31+
</td>
32+
</tr>
33+
<tr>
34+
<td>
35+
<label for="r-left">Border Color </label>
36+
</td>
37+
<td>
38+
<input type="checkbox" id="n-border-color" checked="checked" />
39+
</td>
40+
</tr>
41+
<tr>
42+
<td>
43+
<label for="r-left">Border Width </label>
44+
</td>
45+
<td>
46+
<input type="checkbox" id="n-border-width" checked="checked" />
47+
</td>
48+
</tr>
49+
<tr>
50+
<td>
51+
<input type="button" value="Select All" id="select-all-nodes" />
52+
</td>
53+
<td>
54+
<input type="button" value="Select None" id="select-none-nodes" />
55+
</td>
56+
</tr>
57+
</table>
58+
59+
<h4>Edge Styles</h4>
60+
<table>
61+
<tr>
62+
<td>
63+
<label for="r-left">Line Width </label>
64+
</td>
65+
<td>
66+
<input type="checkbox" id="e-line-width" checked="checked" />
67+
</td>
68+
</tr>
69+
<tr>
70+
<td>
71+
<label for="r-left">Line Color </label>
72+
</td>
73+
<td>
74+
<input type="checkbox" id="e-line-color" checked="checked" />
75+
</td>
76+
</tr>
77+
<tr>
78+
<td>
79+
<input type="button" value="Select All" id="select-all-edges" />
80+
</td>
81+
<td>
82+
<input type="button" value="Select None" id="select-none-edges" />
83+
</td>
84+
</tr>
85+
</table>
86+
87+
<h4>Label Styles</h4>
88+
<table>
89+
<tr>
90+
<td>
91+
<label for="r-left">Font Size </label>
92+
</td>
93+
<td>
94+
<input type="checkbox" id="l-font-size" checked="checked" />
95+
</td>
96+
</tr>
97+
<tr>
98+
<td>
99+
<label for="r-left">Font Color </label>
100+
</td>
101+
<td>
102+
<input type="checkbox" id="l-font-color" checked="checked" />
103+
</td>
104+
</tr>
105+
<tr>
106+
<td>
107+
<input type="button" value="Select All" id="select-all-labels" />
108+
</td>
109+
<td>
110+
<input type="button" value="Select None" id="select-none-labels" />
111+
</td>
112+
</tr>
113+
</table>
114+

‎Templates/Spacetree/test7.html‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,57 @@
11
$def with (model)
22

3-
<h4>Change Tree Orientation</h4>
3+
<h4>Tree Orientation</h4>
44
<table>
55
<tr>
66
<td>
7-
<label for="r-left">left </label>
7+
<label for="r-left">Left </label>
88
</td>
99
<td>
1010
<input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
1111
</td>
1212
</tr>
1313
<tr>
1414
<td>
15-
<label for="r-top">top </label>
15+
<label for="r-top">Top </label>
1616
</td>
1717
<td>
1818
<input type="radio" id="r-top" name="orientation" value="top" />
1919
</td>
20+
</tr>
2021
<tr>
2122
<td>
22-
<label for="r-bottom">bottom </label>
23+
<label for="r-bottom">Bottom </label>
2324
</td>
2425
<td>
2526
<input type="radio" id="r-bottom" name="orientation" value="bottom" />
2627
</td>
2728
</tr>
2829
<tr>
2930
<td>
30-
<label for="r-right">right </label>
31+
<label for="r-right">Right </label>
3132
</td>
3233
<td>
3334
<input type="radio" id="r-right" name="orientation" value="right" />
3435
</td>
3536
</tr>
37+
</table>
38+
39+
<h4>Selection Mode</h4>
40+
<table>
41+
<tr>
42+
<td>
43+
<label for="s-normal">Normal </label>
44+
</td>
45+
<td>
46+
<input type="radio" id="s-normal" name="selection" checked="checked" value="normal" />
47+
</td>
48+
</tr>
49+
<tr>
50+
<td>
51+
<label for="s-root">Set as Root </label>
52+
</td>
53+
<td>
54+
<input type="radio" id="s-root" name="selection" value="root" />
55+
</td>
56+
</tr>
3657
</table>

‎Tests/Spacetree/test10.js‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
function init(){
2-
function get(id) {
3-
return document.getElementById(id);
4-
};
52
//init data
63
var json = {
74
id: "node02",
@@ -738,45 +735,57 @@ function init(){
738735
//preprocess subtrees orientation
739736
var arr = json.children, len = arr.length;
740737
for(var i=0; i < len; i++) {
741-
if(i < len / 2) {
738+
//split half left orientation
739+
if(i < len / 2) {
742740
arr[i].data.$orn = 'left';
743741
$jit.json.each(arr[i], function(n) {
744742
n.data.$orn = 'left';
745743
});
746744
} else {
745+
//half right
747746
arr[i].data.$orn = 'right';
748747
$jit.json.each(arr[i], function(n) {
749748
n.data.$orn = 'right';
750749
});
751750
}
752751
}
753-
752+
//grab radio button
753+
var normal = $jit.id('s-normal');
754754
//end
755755
//init st
756756
//Create a new ST instance
757-
st = new $jit.ST({
758-
'injectInto': 'infovis',
757+
var st = new $jit.ST({
758+
//id of viz container element
759+
injectInto: 'infovis',
759760
//multitree
760761
multitree: true,
761762
//set duration for the animation
762763
duration: 800,
763764
//set animation transition type
764765
transition: $jit.Trans.Quart.easeInOut,
765766
//set distance between node and its children
766-
levelDistance: 50,
767+
levelDistance: 40,
768+
//sibling and subtrees offsets
769+
siblingOffset: 0,
770+
subtreeOffset: 0,
767771
//set node and edge styles
768772
//set overridable=true for styling individual
769773
//nodes or edges
770774
Node: {
771-
height: 20,
772-
width: 60,
773-
type: 'rectangle',
775+
height: 35,
776+
width: 50,
777+
type: 'ellipse',
774778
color: '#aaa',
775-
overridable: true
779+
overridable: true,
780+
//set canvas specific styles
781+
//like shadows
782+
CanvasStyles: {
783+
shadowColor: '#ccc',
784+
shadowBlur: 10
785+
}
776786
},
777-
778787
Edge: {
779-
type: 'bezier',
788+
type: 'line',
780789
overridable: true
781790
},
782791

@@ -795,18 +804,21 @@ function init(){
795804
label.id = node.id;
796805
label.innerHTML = node.name;
797806
label.onclick = function(){
798-
//st.onClick(node.id);
799-
st.setRoot(node.id, 'animate');
807+
if(normal.checked) {
808+
st.onClick(node.id);
809+
} else {
810+
st.setRoot(node.id, 'animate');
811+
}
800812
};
801813
//set label styles
802814
var style = label.style;
803-
style.width = 60 + 'px';
804-
style.height = 17 + 'px';
815+
style.width = 50 + 'px';
816+
style.height = 35 + 'px';
805817
style.cursor = 'pointer';
806818
style.color = '#333';
807819
style.fontSize = '0.8em';
808820
style.textAlign= 'center';
809-
style.paddingTop = '3px';
821+
style.paddingTop = '10px';
810822
},
811823

812824
//This method is called right before plotting
@@ -853,14 +865,7 @@ function init(){
853865
//load json data
854866
st.loadJSON(json);
855867
//compute node positions and layout
856-
st.compute();
868+
st.compute('end');
857869
st.select(st.root);
858-
859-
//emulate a click on the root node.
860-
// st.onClick(st.root, {
861-
// Move: {
862-
// enable: false
863-
// }
864-
// });
865870
//end
866871
}

0 commit comments

Comments
 (0)