Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
node drawn too wide on spacetree
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
  1 message - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Rob  
View profile  
 More options Feb 16 2012, 1:41 pm
From: Rob <rb.cu...@gmail.com>
Date: Thu, 16 Feb 2012 10:41:24 -0800 (PST)
Local: Thurs, Feb 16 2012 1:41 pm
Subject: node drawn too wide on spacetree
I've got nodes that the rectangles are too big on my spacetree. Here's
an example of what I mean:
http://i.stack.imgur.com/N2hPz.png

here's my code for my spacetree:

        function jitSpaceTree(data,index,rootid){
            var json = eval("(" + data + ")");
            console.log(json);
            //end
            //init Spacetree
            //Create a new ST instance
            var st = new $jit.ST({
                //id of viz container element
                injectInto: 'hier'+index,
                //set duration for the animation
                duration: 800,
                //set animation transition type
                transition: $jit.Trans.Quart.easeInOut,
                //set distance between node and its children
                levelDistance: 25,
                orientation: 'top',
                //enable panning
                Navigation: {
                enable:true,
                panning:true
                },
                //set node and edge styles
                //set overridable=true for styling individual
                //nodes or edges
                Node: {
                    autoHeight: true,
                    autoWidth: true,
                    type: 'rectangle',
                    color: '#aaa',
                    overridable: true
                },

                Edge: {
                    type: 'bezier',
                    overridable: true
                },

                //This method is called on DOM label creation.
                //Use this method to add event handlers and styles to
                //your node.
                onCreateLabel: function(label, node){
                    label.id = node.id;
                    label.innerHTML = node.name;
                    label.onclick = function(){
                        st.onClick(node.id);
                        st.select(node.id);
                        st.removeSubtree(label.id, false, "replot", {
                            hideLabels: false
                        });
                        jQuery.getJSON('Mobile_Subordinate.cfm?
Empid='+node.id, function(data2) {
                            var subtree = '';
                            for(var i=0; i<data2.DATA.length-1; i++){
                                subtree = subtree + '{"id": "' +
data2.DATA[i][4].replace(/\s/g, '') + '","name": "' + data2.DATA[i]
[0].replace(/\s/g, '') + '<br>' + data2.DATA[i][1].replace(/\s/g, '')
+ '","data": {},"children": []},';
                            }
                            subtree = subtree + '{"id": "' +
data2.DATA[data2.DATA.length-1][4].replace(/\s/g, '') + '","name": "'
+ data2.DATA[data2.DATA.length-1][0].replace(/\s/g, '') + '<br>' +
data2.DATA[data2.DATA.length-1][1].replace(/\s/g, '') + '","data":
{},"children": []}';
                            subtree = '{"id": "'+label.id+'",
"children": ['+ subtree +']}'
                            childData = jQuery.parseJSON(subtree);
                            console.log(childData);
                            st.addSubtree(childData, 'replot',{
                                hideLabels: false
                            });
                        });
                    };

                    //set label styles
                    var style = label.style;
                    style.width = node.data.offsetWidth;
                    style.height = node.data.offsetHeight;
                    style.cursor = 'pointer';
                    style.color = '#fff';
                    style.fontSize = '0.8em';
                    style.textAlign= 'center';
                },

                //This method is called right before plotting
                //a node. It's useful for changing an individual node
                //style properties before plotting it.
                //The data properties prefixed with a dollar
                //sign will override the global node style properties.
                onBeforePlotNode: function(node){
                    //add some color to the nodes in the path between
the
                    //root node and the selected node.
                    if (node.selected) {
                        node.data.$color = "#ab8433";
                    }
                    else {
                        delete node.data.$color;
                        node.data.$color = "#ccc";
                    }
                },

                //This method is called right before plotting
                //an edge. It's useful for changing an individual edge
                //style properties before plotting it.
                //Edge data proprties prefixed with a dollar sign will
                //override the Edge global style properties.
                onBeforePlotLine: function(adj){
                    if (adj.nodeFrom.selected && adj.nodeTo.selected)
{
                        adj.data.$color = "#eed";
                        adj.data.$lineWidth = 3;
                    }
                    else {
                        delete adj.data.$color;
                        delete adj.data.$lineWidth;
                    }
                }
            });
            //load json data
            st.loadJSON(json);
            //compute node positions and layout
            st.compute();
            //optional: make a translation of the tree
            st.geom.translate(new $jit.Complex(-200, 0), "current");
            //emulate a click on the root node.
            //st.onClick(st.root);
            st.onClick(rootid);
            //end

        }

The width of the drawn node isn't wrong by the same amount for each
node, so I have no idea what's going on.


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »