0

node.data.$width と label.style.width ツリーを同じエッジで描画しないように設定するときに、spacetree の各レベルに個別の levelDistance を設定する方法

spacetree の各ノード レベルに levelDistance を設定する方法。たとえば、ノード レベル 3 の「levelDistance」を変更したいと考えています。ありがとうございます。

function init(){
//init data

  json = {
    id: "node0",
    name: "zvet",
    data: {},
    children: [{
        id: "node0rrrrrr1",
        name: "1.3",
        data: {$orn:'left'},
        children: [{
             id: "fvwerr1",
             name: "w33",
             data: {$orn:'left'},
        }]

    },
    {
        id: "node02",
        name: "qwe",
        data: {$orn:'left'}

    } ,{
        id: "node03",
        name: "bnm",
        data: {$orn:'left'}

    } ,{
        id: "node04",
        name: "1.3",
        data: {$orn:"right",kk:"kk"}

    },



    {
        id: "vwer",
        name: "vfsewrg",
        data: {$orn:"right",kk:"kk"}

    },
    {
        id: "vweq33e",
        name: "vvvserser",
        data: {$orn:"right",kk:"kk"},
        children: [{
             id: "r345345",
             name: "w33",
             data: {$orn:'right'}
        },
        {
             id: "u786786",
             name: "w33",
             data: {$orn:'right'}
        },
        {
             id: "p809456",
             name: "w33",
             data: {$orn:'right'},
             children: [{
                 id: "weqr232344",
                 name: "w33",
                data: {$orn:'right',kk:"kk"},
                 children: [{
                 id: "weqoooooppp",
                 name: "w33",
                data: {$orn:'right'}
             }]
             }]


        }
        ]

    }

     ]      
};
//end
//init Spacetree
//Create a new ST instance
st = new $jit.ST({
    //id of viz container element
    injectInto: 'infovis',
    Canvas:{
    type: '2D'}  ,
    background:true,
    //set duration for the animation
    duration: 800,
    //set animation transition type
    transition: $jit.Trans.Quart.easeInOut,
    //set distance between node and its children
   levelDistance: 100,
    levelsToShow:5,          
    multitree: true,
    //enable panning
    Navigation: {
      enable:true,
      panning:true
    },
    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges
    Node: {
        height: 20,
        width: 150,
        type: 'rectangle',
        color:'transparent',            
        overridable: true,
        autoWidth:false ,
        CanvasStyles: {  
        fillStyle: 'transparent'                     
        }
    },              
     Edge: {  
     type: 'bezier',  
    overridable: true  
}, 


    onBeforeCompute: function(node){
        Log.write("loading " + node.name);
    },

    onAfterCompute: function(){
        Log.write("done");
    },

    //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.innerHTML='<div  style="position:relative;">'+node.name+'</div>';

        label.onclick = function(){
            if(normal.checked) {
                st.onClick(node.id);
                //st.setRoot(node.id, 'animate'); 
                st.selectedNodeId=node.id;
                $("#"+node.id+" div").animate({"bottom":"+=10px"},"slow");
             //st.addNodeInPath("1234");                                 

            } else {
            st.setRoot(node.id, 'animate');
            }
        };
        //set label styles
         var style = label.style;  
    style.width = 150 + 'px';  
    style.height = 17 + 'px';              
    style.cursor = 'pointer';  
    style.color = '#fff';  
    style.backgroundColor = '#6257DD';  
    style.borderradius='14px';
    style.boxshadow='0 0 16px #FFFFFF';
    style.fontSize = '0.8em';  
    style.textAlign= 'center';         
    style.paddingTop = '3px';  
        if(node.data.kk=="kk")
        {
            style.width = 60+ 'px';
        } 

    },
    onPlaceLabel: function(label, node) {  

}  ,

    //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){
            if(node.data.kk=="kk")
        {
            node.data.$width = 60;  
        } 
        //add some color to the nodes in the path between the
        //root node and the selected node.
        if (node.selected) {
            node.data.$color = "#000000";

            $("#"+node.id).css("background-color","red");
        }
        else {
            delete node.data.$color;

            $("#"+node.id).css("background-color","#6257DD");
            //if the node belongs to the last plotted level
            if(!node.anySubnode("exist")) {
                //count children number
                var count = 0;
                node.eachSubnode(function(n) { count++; });
                //assign a node color based on
                //how many children it has
                node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
            }
        }
    },

    //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

//end
//Add event handlers to switch spacetree orientation.
var top = $jit.id('r-top'), 
    left = $jit.id('r-left'), 
    bottom = $jit.id('r-bottom'), 
    right = $jit.id('r-right'),
    normal = $jit.id('s-normal');


function changeHandler() {
    if(this.checked) {
        top.disabled = bottom.disabled = right.disabled = left.disabled = true;
        st.switchPosition(this.value, "animate", {
            onComplete: function(){
                top.disabled = bottom.disabled = right.disabled = left.disabled = false;
            }
        });
    }
};

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.select(st.root);
top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
//end

}

4

1 に答える 1

0

レベルごとに異なる距離を設定することはできません。

できることは、レベルの node.data.$size を変更して、他の葉よりも小さくまたは大きく表示することです。

距離は、ノードを配置するための割り当てられたスペースと考えてください。距離よりも小さいサイズのノードを作成すると、ギャップが生じます。その一部。

于 2013-03-14T11:23:55.123 に答える