在哪里可以找到 Javascript Tree Creator？

Question

您知道任何 Javascript Tree Creator 可以让您添加或删除最多 3 层深度的节点吗？

我目前正在使用 jQuery 树视图，但目前正在编写很难添加和删除节点项的代码。

干杯， 标记

Answer 1

检查我的，jtree，它有一个非常漂亮和简单的 api，带有一些编辑示例

Answer 2

试试这个

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

它支持复选框，以及更多功能

项目的主页是https://code.google.com/p/zkjs/

Answer 3

这里是actionscript版本，有点像JS，只是线条渲染器/画布在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]