Javascript InfoVis Spacetree单个节点样式

Question

我是javascript编码的新手 - 任何人都可以帮助我使用InfoVis Spacetree吗？我试图将某个节点级别的宽度和高度设置为小于其余节点.好像我把它放在了数据中:{}但是当我试着把data:{"$height":"30"}它搞砸了整棵树......

Answer 1

我这样做的方法是将一些信息放在这些特殊节点的数据数组中,然后在绘制它的时候,我将仅在这些节点上进行修改.

数据:

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'
                }
            ]
        }
    ]
};

所以你可以看到一些节点有一个名为mytype的数据元素,你必须在绘制树时注意这些.为此,您必须实现onBeforePlotNode函数.此方法对于在绘制节点样式之前更改节点样式非常有用.

以下是处理特殊节点的SpaceTree Creation的代码:

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;                    
        }
    },
});

您可以看到OnBeforePlotNode正在查看节点的数据以查看它是否是特殊数据.然后,您只能修改这些节点.