木構造を可視化するツールをつくりました

このように、わかりやすく任意の木構造を表示します。いくらか制限はありますが。

実物

まず実物です。

木構造可視化ツール

コード自体はgistにあげてあります。

木構造の表示方法

まず、gistのコードをダウンロードしてください。そのコードの中の // ここに表示したい木構造を記述してください とある部分の下に木構造を記述します。

表示できる木構造はつぎのような木構造のみです

class Node {
    constructor(val) {
        this.value = val;
        this.children = [];

    }
} 
const tree = new Node(0);
tree.children = [new Node(1), new Node(3)];

このように、children、valueプロパティを持ち、childrenには再帰的にNodeが入っている構造にしてください。

N分木を表示させたい

デフォルトでは、二分木が入力されることが前提となっています。二分木以外を入れると、節が重なって表示されたり、おかしな挙動となります。

2分木以外を表示させたい場合、

    var r = 10, edge = 20, width = 200, between = 10, n = 2;

ここの最後のnを変更してください。3分木にしたい場合は n = 3、 4分木にしたい場合は n = 4としてください。

右の子のみを表示させたい

children[0]が左の子、children[1]が右の子です。そのため、右の子のみを表示させたい場合、children[0]をundefinedあるいはnullにしてください。

tree.children = [null, new Node(1)];

終わりに

つくっておいてアレですが、入力方法がかなりめんどうなので実用性には乏しいと思います。木構造をカンタンにあつかえる日がくることを切に願うばかりです…