Javascript InfoVis Spacetree Индивидуальный стиль узла - PullRequest
Новая
       44

Javascript InfoVis Spacetree Индивидуальный стиль узла

2 голосов
/ 02 апреля 2011

Я новичок в кодировке javascript - может кто-нибудь помочь мне с Spacetree InfoVis ?Я пытаюсь установить ширину и высоту определенного уровня узлов, чтобы быть меньше, чем остальные.Кажется, я вставил это в данные: {}, но когда я попытался data:{"$height":"30"}, оно испортило все дерево ...

Ответы [ 2 ]

6 голосов
/ 05 мая 2011

То, как я это делаю, заключается в том, чтобы поместить некоторую информацию в массив данных этих специальных узлов, а затем, когда придет время его рисовать, я внесу изменения только в эти узлы.

Данные: 

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

0 голосов
/ 09 января 2012

Установите позиции 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");
    }

Спасибо.

...