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格，即，其保持spacetree股利不會顯示在時間整個曲線圖。 在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"); 
    } 

謝謝。