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, который будет обрабатывать ваши специальные узлы:

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 просматривает данные узла, чтобы увидеть, является ли он специальным. Тогда вы можете изменить только эти узлы.

Answer 2

Установите позиции offSetX и offSetY следующим образом:

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

Infovis div, т. Е. Div, в котором хранится пространственное дерево, не будет отображать весь график время от времени. Добавление следующего кода в событие onComplete поможет.

Это установит высоту div для размещения всего графика. Я использую ориентацию как "верх".

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

Благодарю.