tree-visualizer DEMO

Tree Visualizerを使うと、今までわかりにくかった木構造が可視化できます。

[6,4,9,2,5,null,null,null]の順に並べられたBSTに、3を挿入し、3を検索してみましょう。


Code

                
    let findBSTDiv = document.getElementById("findBST");
    findBSTDiv.style.overflow = "scroll";
    findBSTDiv.style.background = "rgb(171,216,167)"
    let findBST = treeVisualizer(
        {target:"findBST"}
    );
    document.getElementById("findBST-drawBtn").onclick = () => {
        findBST.drawData(
            [{
                data:"[6,4,9,2,5,null,null,null]",
            }],`<div class="d-flex justify-content-center">start</div>`
        )
        findBST.nextStep(
            [{
                data:"[6,4,9,2,5,null,null,null,3]",
            }],`<div class="d-flex justify-content-center">Insert 3</div>`
        )
        findBST.nextStep(
            [{
                data:"[6,4,9,2,5,null,null,null,3]",
                boxColor:"[rgb(232,108,46),null,null,null,null,null,null,null,null]"
            }],`<div class="d-flex justify-content-center">6</div>`
        )
        findBST.nextStep(
            [{
                data:"[6,4,9,2,5,null,null,null,3]",
                boxColor:"[rgb(235,21,21),rgb(232,108,46),null,null,null,null,null,null,null]",
            }],`<div class="d-flex justify-content-center">6 -> 4</div>`
        )
        findBST.nextStep(
            [{
                data:"[6,4,9,2,5,null,null,null,3]",
                boxColor:"[rgb(235,21,21),rgb(235,21,21),null,rgb(232,108,46),null,null,null,null,null]"
            }],`<div class="d-flex justify-content-center">6 -> 4 -> 2</div>`
        )
        findBST.nextStep(
            [{
                data:"[6,4,9,2,5,null,null,null,3]",
                boxColor:"[rgb(235,21,21),rgb(235,21,21),null,rgb(235,21,21),null,null,null,null,rgb(232,108,46)]"
            }],`<div class="d-flex justify-content-center">6 -> 4 -> 2 -> Found 3!</div>`
        )
    }

分離

"[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]"この木構造を分離してみましょう


Code

                
    let separateBSTDiv = document.getElementById("separateBST");
    separateBSTDiv.style.overflow = "scroll";
    separateBSTDiv.style.background = "rgb(171,216,167)"
    let separateBST = treeVisualizer(
        {target:"separateBST"}
    );
    document.getElementById("separateBST-drawBtn").onclick = () => {
        separateBST.drawData(
            [{
                data:"[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]",
            }], `<div class="d-flex justify-content-center">start</div>`
        )
        separateBST.nextStep(
            [{
                data:"[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]",
                boxColor:"[rgb(232,108,46),rgb(0,97,59),rgb(232,108,46),rgb(0,97,59),rgb(0,97,59),rgb(232,108,46),rgb(232,108,46),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59)]",
                textColor:"[null,rgb(255,255,255),null,rgb(255,255,255),rgb(255,255,255),null,null,rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),null,null,null,null,rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255)]"
            }],`<div class="d-flex justify-content-center">Separate</div>`
        )
        separateBST.nextStep(
            [{
                data:"[1,null,3,6,7,12,13,14,15]",
                boxColor:"[rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46)]"
            },{
                data:"[2,4,5,8,9,10,11,16,17,18,19,20]",
                boxColor:"[rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59)]",
                textColor:"[rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255)]"
            }],`<div class="d-flex justify-content-center">Separate</div>`
        )
        separateBST.nextStep(
            [{
                data:"[3,6,7,12,13,14,15]",
                boxColor:"[rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46)]"
            },{
                data:"[2,4,5,8,9,10,11,16,17,18,19,20]",
                boxColor:"[rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59)]",
                textColor:"[rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255)]"
            }],`<div class="d-flex justify-content-center">Separate -> Delete 3"</div>`
        )
        separateBST.nextStep(
            [{
                data:"[2,4,5,8,9,10,11,16,17,18,19,20]",
                boxColor:"[rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59),rgb(0,97,59)]",
                textColor:"[rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255),rgb(255,255,255)]"
            },{
                data:"[3,6,7,12,13,14,15]",
                boxColor:"[rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46),rgb(232,108,46)]"
            }
            ],`<div class="d-flex justify-content-center">Separate -> Delete 3 -> exchange</div>`
        )
    }