如何用javascript实现二叉树编码的可视化表示？

我用javascript创建了一个binery树，但我不知道如何用html打印。我尝试了很多方法，但都不管用，有人能帮我吗

我尝试了canavas，但我在这方面并不完美，所以它对我不起作用，我尝试添加ul和li形式的javascript，但它带来了很多问题

class Node {
constructor(data,left= null,right= null){
    this.data = data;
    this.left = left;
    this.right = right;
}
}

// AB = Binery Tree
class AB {
constructor(){
    this.root = null;
}
add(data,i){
    const node = this.root;
    console.log(data,i);
    if(node === null){
        this.root = new Node(data);
        return;
    }else{
        const SEARCHTREE = function(node){
            if(data <= node.data){
                if(node.left === null){
                    node.left = new Node(data);
                    return;
                } else if (node.left !== null){
                    return SEARCHTREE(node.left);
                }
            } else if (data > node.data) {
                if(node.right === null){
                    node.right = new Node(data);
                    return;
                }
                else if (node.right !== null){
                    return SEARCHTREE(node.right);
                }
            } else {
                return null;
            }
        };
        return SEARCHTREE(node);
    }
  }
};


const ab = new AB();
for (var i = 0; i < 19; i++) {
ab.add(Math.floor(Math.random() * 10) + 1,i);
}
console.log(ab)

类节点{
构造函数（数据，左=null，右=null）{
这个数据=数据；
this.left=左；
这个。右=右；
}
}
//AB=二叉树
AB类{
构造函数（）{
this.root=null；
}
添加（数据，一）{
const node=this.root；
控制台日志（数据，i）；
如果（节点===null）{
this.root=新节点（数据）；
返回；
}否则{
const SEARCHTREE=函数（节点）{
if（数据节点数据）{
if（node.right==null）{
node.right=新节点（数据）；
返回；
}
else if（node.right！==null）{
返回SEARCHTREE（node.right）；
}
}否则{
返回null；
}
};
返回搜索树（节点）；
}
}
};
常数ab=新ab（）；
对于（变量i=0；i<19；i++）{
ab.add（Math.floor（Math.random（）*10）+1，i）；
}
控制台日志（ab）

这是我得到的树：

---

我找到了解决方案，谢谢。 这是js文件：

class Node {
    constructor(x,y,r, ctx, data){
    this.data = data;
    this.leftNode = null;
    this.rightNode = null;
    this.x = x;
    this.y = y;
    this.r = r;
    this.ctx = ctx;
  }

  draw(){
    this.ctx.beginPath();
      this.ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); 
      this.ctx.stroke();
      this.ctx.closePath();
      this.ctx.strokeText(this.data, this.x, this.y);
  }

  getData(){
    return this.data;
  }
  getX(){
    return this.x;
  }
  getY(){
    return this.y;
  }
  getRadius(){
    return this.r;
  }
  leftCoordinate(x,y,r){
    return {cx: (x - (4*r)), cy: (y + (4*r))};
  }
  rightCoordinate(x,y,r){
    return {cx: (x + (3*r)), cy: (y + (3*r))};
  }

}

class Line {
  // Takes 
  // x,y      - starting x,y coordinate
  // toX, toY - ending x,y coordinate
  draw(x, y, toX, toY, r, ctx) {
    var moveToX = x;
    var moveToY = y + r;
    var lineToX = toX;
    var lineToY = toY - r;
    ctx.beginPath();
    ctx.moveTo(moveToX, moveToY);
    ctx.lineTo(lineToX, lineToY);
    ctx.stroke(); 
  };
}
class BTree {
  constructor(){
    this.c = document.getElementById('my-canvas');
    this.ctx = this.c.getContext('2d');
    this.line = new Line();
    this.root = null;
  }

  add(data){
    // If root exists, then recursively find the place to add the new node
      if(this.root) {
        this.recursiveAddNode(this.root, null, null, data);
      } else {
      // If not, the add the element as a root 
        this.root = this.addAndDisplayNode(200, 20, 15, this.ctx,data);
        return;
      } 
  }

  // Recurively traverse the tree and find the place to add the node
    recursiveAddNode(node, prevNode, coordinateCallback, data) {
      if(node === null) {
      // This is either node.leftCoordinate or node.rightCoordinate
      var xy = coordinateCallback;
      var newNode = this.addAndDisplayNode(xy.cx, xy.cy, 15, prevNode.ctx, data);
      this.line.draw(prevNode.getX(), prevNode.getY(), xy.cx, xy.cy, prevNode.getRadius(), prevNode.ctx);
      return newNode; 
      } 
      else {
      if(data < node.getData()) {
        if(node.leftNode === null){
          var xy = node.leftCoordinate(node.x,node.y,node.r);
          node.leftNode = this.addAndDisplayNode(xy.cx, xy.cy, 15, node.ctx, data);
          this.line.draw(node.getX(), node.getY(), xy.cx, xy.cy, node.getRadius(), node.ctx);
          return;
        }else if(node.leftNode !== null){
          return 
  this.recursiveAddNode(node.leftNode,node,node.leftCoordinate(node.x,node.y,node.r), data);
        }
      }else if(data > node.getData()){
        if(node.rightNode === null){
          var xy = node.rightCoordinate(node.x,node.y,node.r);
          node.rightNode = this.addAndDisplayNode(xy.cx, xy.cy, 15, node.ctx, data);
          this.line.draw(node.getX(), node.getY(), xy.cx, xy.cy, node.getRadius(), node.ctx);
          return;
        }else if(node.rightNode !== null){
          return 
this.recursiveAddNode(node.rightNode,node,node.rightCoordinate(node.x,node.y,node.r), data);
        }
      }else {
        return null;
      }
      }
  }

  // Adds the node to the tree and calls the draw function
  addAndDisplayNode(x, y, r, ctx, data) {
    var node = new Node(x, y, r, ctx, data);
    node.draw();
    return node;
  }
}

var btree = new BTree();
for (var i = 0; i < 19; i++) {
  btree.add(Math.floor(Math.random() * 10) + 1);
}

---

这棵树看起来怎么样？我猜你想要一个视觉表现。物理布局节点并连接它们的东西？是的，这就是我想要的，我想在视图中看到它，而不仅仅是在控制台中

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="tree center">
    <canvas id='my-canvas' width="1000" height="1000">
      Your browser doesnot support canvas
    </canvas>
  </div>
</body>
<script type="text/javascript" src="arbre.js"></script>
</html>

.center {margin: auto; width: 50%;}