coding style - Javascript InfoVis Spacetree Individual Node Styling - Stack Overflow

admin管理员组

文章数量:1406926

I am newbie with javascript coding - can anyone help me with the InfoVis Spacetree? I am trying to set the width and height of a certain level of nodes to be smaller than the rest. It seems like I put it in the data: {} but when I tried data:{"$height":"30"} it screws up the whole tree...

I am newbie with javascript coding - can anyone help me with the InfoVis Spacetree? I am trying to set the width and height of a certain level of nodes to be smaller than the rest. It seems like I put it in the data: {} but when I tried data:{"$height":"30"} it screws up the whole tree...

• javascript
• coding-style
• infovis
• thejit
• space-tree

Share Improve this question Follow edited Feb 6, 2015 at 9:12 ankitr 6,18288 gold badges4848 silver badges6767 bronze badges asked Apr 1, 2011 at 21:29 MichaelMichael 3311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The way I am doing it, is to put some information in these special node's data array then when its time to draw it, I will do the modification only on these nodes.

Data:

var json = 
{
    'id':'id0.0',  
    'name':'Root',  
    'data':
    {
        'mytype':'1'
    }, 

    'children':
    [
        {
            'id':'id1.0',  
            'name':'Node 1.0', 
            'data':
            {
                'mytype':'2'
            }, 

            'children':
            [
                {
                    'id':'id2.0',  
                    'name':'Node 2.0'
                }, 

                {
                    'id':'id2.1',  
                    'name':'Node 2.1'
                }, 

                {
                    'id':'id2.2',  
                    'name':'Node 2.2'
                }
            ]
        }
    ]
};

So you can see that some node have a data element named mytype, you have to look out for these when the tree is getting drawn. To do that you have to implement the onBeforePlotNode function. This method is useful for changing a node style right before plotting it.

Here is the code for the SpaceTree Creation that will handle your special nodes :

myTree = new $jit.ST({
    //id of viz container element
    injectInto: 'MyGraph',
    orientation: 'top',
    duration: 200,
    transition: $jit.Trans.Quart.easeInOut,
    levelDistance: 50,


    //enable panning
    Navigation: 
    {
      enable:true,
      panning:true,
      zooming:20
    },


    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges
    Node: {
        overridable: true,  
        autoWidth: true,  
        autoHeight: true,  
        type: 'rectangle'  
    },

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


    onBeforePlotNode: function(node)
    {
        //if(node.data.class == 'node') 
        if(node.data.mytype == '2') 
        {
            node.data.$height = 60;                    
        }
    },
});

You can see the OnBeforePlotNode is looking at the node's data to see if its a special one. Then you can modify only these nodes.

Set the offSetX and offSetY positions like this:

var st = new $jit.ST({
    'injectInto': 'infovis',
    //set duration for the animation
    duration: 800,
    //set animation transition type
    transition: $jit.Trans.Quart.easeInOut,
    //set distance between node and its children
    levelDistance: 50,
    //set max levels to show. Useful when used with
    //the request method for requesting trees of specific depth
    levelsToShow: 4,
    orientation: 'top',
    align: 'center',
    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges 
    offsetX: 0, offsetY: 110,
    Node: {
        height: 30,
        width: 31,
        //use a custom
        //node rendering function
        type: 'nodeline',
        color: '#f76b14',
        lineWidth: 1,
        align: "center",
        overridable: true
    },

The infovis div, i.e., the div which holds the spacetree would not display the whole graph at times. Adding the following code in onComplete event would do the trick.

This would set the height of the div to acmodate the whole graph. I am using orientation as 'top'.

onComplete: function () {
        var LastnodeTop = 0;
        $("div.node").each(function () {
            var pos = $(this).position();
            if (pos.top > LastnodeTop)
                LastnodeTop = pos.top;
        });
        var LastnodeTopStr = LastnodeTop.toString();
        LastnodeTopStr = LastnodeTopStr.substring(0, 4);
        var LastnodeTopInt = parseInt(LastnodeTopStr) + 100;            
        $("#infovis").attr("style", "height:" + LastnodeTopInt + "px");
    }

Thanks.

本文标签： coding styleJavascript InfoVis Spacetree Individual Node StylingStack Overflow