哪裏可以找到Javascript Tree Creator？

Question

你知道任何Javascript Tree Creator，可以讓你添加或刪除深達3層的節點嗎？

我目前正在使用jQuery樹視圖，但目前正在編碼添加和刪除硬的節點項目。

乾杯， 馬克

Answer 1

檢查我一個，jtree，它獲得了相當不錯的，方便的API，一些編輯exemples

Answer 2

試試這個

http://kazge.com/show/zkjs/src/tree.html

它支持複選框，以及更多功能

該項目的主頁是https://code.google.com/p/zkjs/

Answer 3

這裏是一個動作腳本版本，它像JS一樣高高在上，除了線渲染器/ canvas在JS中不同。它會引導你到多個腳本，作爲tehre是一個完整的在網絡上某處這段代碼的翻譯頁面：

這段代碼實際上是一些代碼的網頁 http://rosettacode.org/wiki/Fractal_tree

[代碼]

端口

/* 


    3D Fractal Tree 

*/ 


    public var depth = 9; 
    public var angleSpread = 21.0; 
    public var skew = 21.0; 
    public var branchMat : Material; 
    public var averaged = false; 
    private var deg_to_rad = 3.14159265/180.0; 
    private var scale = 0.50; 
    private var line : LineRenderer; 
    private var fractalTree : GameObject; 
    private var branch : GameObject; 

    function Start() { 
     //un-comment the line below to build the tree on start if not using MainController 
     buildNewTree(); 
    } 

    function killOldTree(){ 
     Destroy(fractalTree); 
    } 

    function buildNewTree(){ 
     //Create a new empty gameObject to store our fractal tree 
     fractalTree = new GameObject ("Fractal_Tree"); 
     fractalTree.transform.parent = gameObject.transform; 
     if(averaged){angleSpread*=2;} 
     drawTree(0.0, 0.0, 0.0, 0.0, 90.0, 90.0, depth);  
    } 

    //A recursive function used to draw the fractal tree 
    function drawTree(x1 : float, y1 : float, z1 : float, y3 : float, angle : float, angle2 : float, depth : int){ 
     if (depth != 0){ 
      //Set the x2 point 
      var x2 : float= x1 + (Mathf.Cos(angle * deg_to_rad) * depth * scale); 

      //Set the z2 point 
      var z2 : float= z1 + (Mathf.Cos(angle2 * deg_to_rad) * depth * scale); 

      //Set the y2 point 
      var y2 : float= y1 + (Mathf.Sin(angle * deg_to_rad) * depth * scale); 

      //Set the y4 point 
      var y4 : float= y3 + (Mathf.Sin(angle2 * deg_to_rad) * depth * scale); 

      //Average the y values 
      var n1 : float = (y3+y1)/2; 
      var n2 : float= (y4+y2)/2; 

      //Call the drawline function, provide the coordinate data 
      drawLine(x1, n1, z1, x2, n2, z2, depth); 

      //Iterate the function recursively, change the rotation of the branches 
      if(!averaged){ 
       if(depth % 2 == 0){ 
        drawTree(x2, y2, z2, y4, angle - angleSpread - skew, angle2 - angleSpread- skew, depth - 1); 
        drawTree(x2, y2, z2, y4, angle + angleSpread - skew, angle2 + angleSpread- skew, depth - 1); 
       } 
       if(depth % 2 == 1){ 
        drawTree(x2, y2, z2, y4, angle + angleSpread - skew, angle2-angleSpread- skew, depth - 1); 
        drawTree(x2, y2, z2, y4, angle - angleSpread - skew, angle2+angleSpread- skew, depth - 1); 
       } 
      } 

      //Iterate the function recursively, change the rotation of the branches (rounded version) 
      if(averaged){ 
       if(depth % 2 == 0){ 
        drawTree(x2, y2, z2, y4, angle - angleSpread - skew, angle2 - skew, depth - 1); 
        drawTree(x2, y2, z2, y4, angle + angleSpread - skew, angle2 - skew, depth - 1); 
       } 
       if(depth % 2 == 1){      
        drawTree(x2, y2, z2, y4, angle - skew, angle2 - angleSpread - skew, depth - 1); 
        drawTree(x2, y2, z2, y4, angle - skew, angle2 + angleSpread - skew, depth - 1); 
       } 
      } 
     } 
    } 

    //Draws a single branch of the tree 
    function drawLine(x1 : float, y1 : float, z1 : float, x2 : float, y2 : float, z2 : float, color : int){ 

     //Create a gameObject for the branch 
     branch = new GameObject ("branch"); 

     //Make the branch child of the main gameobject 
     branch.transform.parent = fractalTree.transform; 

     //Add a line renderer to the branch gameobject 
     line = branch.AddComponent("LineRenderer") ;//as LineRenderer; 

     //Change the material of the LineRenderer 
     line.material = branchMat; 

     //Thin the branches through each iteration 
     line.SetWidth(color*0.04, color*0.02); 

     //Draw the line. 
     line.SetPosition(0, new Vector3(x1,y1,z1)); 
     line.SetPosition(1, new Vector3(x2,y2,z2)); 
    } 
[/code]