Где найти Javascript Tree Creator?

Question

Знаете ли вы какой-либо Javascript Tree Creator, который позволяет добавлять или удалять узлы глубиной до 3 уровней?

В настоящее время я использую древовидное представление jQuery, но в настоящее время кодирую добавление и удаление элементов узла, что сложно.

Ура, Mark

Answer 1

попробуйте это

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

это поддержка флажок и больше возможностей

Домашняя страница проекта: https://code.google.com/p/zkjs/

Answer 2

вот версия actioncript, она abit похожа на JS, за исключением того, что рендер / canvas отличается в JS.это приведет вас к большему количеству сценариев, так как страница, полная переводов этого кода где-то в сети:

этот код фактически является портом некоторого кода со страницы 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]

Answer 3

проверьте мой, jtree , он получит довольно хороший и простой API с некоторыми примерами редактирования