Techiio-author
Started by Ronald RauheSep 14, 2021

Open
How to get visual representation of binary tree codding by javascript?

1 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 1 VIEWES SHARE

I created a binery tree using javascript but i don't know how to print it in html i tried a lot of methods but nothings work good, can someone help me in this ?

I tried canavas but i'm not perfect in this so it's doesn't work for me , i tried to append ul and li form javascript but it's give a lot of problem.

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)

1 Replies

Techiio-commentatorDavid Harrison replied 5 months ago0 likes0 dislikes

Hey, I found the solution you'll be trying:

Here is the HTML code:

<!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>

Or is this CSS file:

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

And here is the finally JavaScript Code:

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);
}
You must be Logged in to reply
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance