![](/img/trans.png)
[英]How to get the binary representation of the content of a DOM element in javascript?
[英]How to get visual representation of binary tree codding by javascript?
我使用 javascript 创建了一个二进制树,但我不知道如何在 html 中打印它我尝试了很多方法但没有任何效果,有人可以帮助我吗?
我试过canavas,但我在这方面并不完美,所以它对我不起作用,我试图在javascript中附加ul和li,但它带来了很多问题。
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)
我找到了解决方案谢谢。 这是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);
}
这是 html 文件:
<!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>
这是 css 文件:
.center {margin: auto; width: 50%;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.