在画布上定位用于二叉搜索树Javascript的圆圈

我试图使一个网页，做一个二进制搜索树可视化。树中的每个节点都包含一个左右字段、一个数据字段和一个圆对象

这是我的节点类：

class Nodee {
    constructor(data) {
        this.data = data;
        this.left = null;
        this.right = null;
        this.circle = new Circle(window_width / 2, 120, 25, (255,0,0)); 
    }
}

还有我的圈课：

class Circle {

    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }

    draw(context) {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        context.fill();
        context.stroke();
        context.closePath();
    }
}

我还有这些变量来定义画布和画布的上下文：

let canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

let window_height = window.innerHeight;
let window_width = window.innerWidth;

canvas.width = window_width;
canvas.height = window_height;

canvas.style.background = "#ffffff";

我试图让网页在添加新节点时，在画布上绘制每个节点的每个圆。每当删除节点时，圆也会从屏幕上删除。我遇到的问题是如何计算每个圆的适当坐标。我希望根位于屏幕的中心，朝向画布的顶部。我还希望当屏幕变得太拥挤时，圆圈会变小，这样所有的节点仍然适合

有人知道我会怎么做吗

基本上是这样的：

---

图形绘制是一个复杂的问题，特别是对于树，这里有一个很好的概述：