基于JavaScript、CSS、HTML实现二叉搜索树可视化：节点定位问题求助

我想实现一个类似visualalgo.net的二叉搜索树（BST）可视化工具，用JavaScript生成10个随机元素构建BST。目前已经完成随机数生成和HTML节点创建，但搞不清节点定位逻辑，没法让节点呈现BST结构（比如小于根节点的放左下方，大于的放右下方），求怎么用CSS实现布局。

已实现的代码：

HTML代码 #

<div class="elements"></div>

JavaScript代码 #

let nodeElements = document.querySelector(".elements")
const randomArr = [];
for (let i = 0; i < 10; i++) {
  let randomValue = Math.floor(Math.random() * 50);
  randomArr.push(randomValue);
}

let newNode;
for (let i = 0; i < randomArr.length; i++) {
  newNode = document.createElement("div");
  newNode.classList.add("node"); // 把div样式改成圆形节点
  newNode.innerText = randomArr[i];
  nodeElements.appendChild(newNode); // nodeElements是包裹所有节点的容器
}

要实现BST的层级布局，光靠CSS无法完成，得先在JS里构建BST的树形数据结构，计算每个节点的坐标，再用绝对定位把节点放到对应位置。具体步骤如下：

1. 构建BST数据结构 #

先定义节点类，将随机数组插入成标准的二叉搜索树：

// 定义BST节点类，存储值、左右子节点以及坐标
class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
    this.x = 0;
    this.y = 0;
  }
}

// 从数组构建BST
function buildBST(arr) {
  if (arr.length === 0) return null;
  const root = new TreeNode(arr[0]);
  for (let i = 1; i < arr.length; i++) {
    insertNode(root, arr[i]);
  }
  return root;
}

// 递归插入节点，遵循BST规则
function insertNode(node, value) {
  if (value < node.value) {
    node.left ? insertNode(node.left, value) : node.left = new TreeNode(value);
  } else {
    node.right ? insertNode(node.right, value) : node.right = new TreeNode(value);
  }
}

2. 计算每个节点的坐标 #

用广度优先遍历按层级计算坐标，保证同一层级节点水平等距，层级间垂直间距固定：

// 计算每个节点的页面坐标
function calculateCoordinates(root) {
  if (!root) return;
  const queue = [{ node: root, level: 0 }];
  const levelNodeCount = new Map();

  // 先统计每层的节点数量
  while (queue.length > 0) {
    const { node, level } = queue.shift();
    levelNodeCount.set(level, (levelNodeCount.get(level) || 0) + 1);
    node.left && queue.push({ node: node.left, level: level + 1 });
    node.right && queue.push({ node: node.right, level: level + 1 });
  }

  // 重新遍历设置坐标
  const rootX = window.innerWidth / 2; // 根节点水平居中
  const verticalGap = 100; // 层级间垂直间距
  queue.push({ node: root, level: 0, x: rootX, y: 50 });

  while (queue.length > 0) {
    const { node, level, x, y } = queue.shift();
    node.x = x;
    node.y = y;

    const nextLevelCount = levelNodeCount.get(level + 1);
    if (!nextLevelCount) continue;

    // 子节点的水平间距根据层级动态调整
    const horizontalGap = window.innerWidth / (nextLevelCount + 1);
    if (node.left) {
      const leftX = x - horizontalGap / Math.pow(2, level);
      queue.push({ node: node.left, level: level + 1, x: leftX, y: y + verticalGap });
    }
    if (node.right) {
      const rightX = x + horizontalGap / Math.pow(2, level);
      queue.push({ node: node.right, level: level + 1, x: rightX, y: y + verticalGap });
    }
  }
}

3. CSS样式设置 #

给容器设相对定位，节点用绝对定位实现自由布局，同时添加圆形样式：

.elements {
  position: relative;
  min-height: 100vh;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.node {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4285f4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%); /* 让节点中心对齐坐标点 */
}

4. 完整整合代码 #

把所有逻辑合并，生成节点并设置位置：

let nodeElements = document.querySelector(".elements");
const randomArr = [];

// 生成10个随机数
for (let i = 0; i < 10; i++) {
  let randomValue = Math.floor(Math.random() * 50);
  randomArr.push(randomValue);
}

// 构建BST并计算坐标
const root = buildBST(randomArr);
calculateCoordinates(root);

// 递归渲染所有节点
function renderNode(node) {
  if (!node) return;
  const newNode = document.createElement("div");
  newNode.classList.add("node");
  newNode.innerText = node.value;
  newNode.style.left = `${node.x}px`;
  newNode.style.top = `${node.y}px`;
  nodeElements.appendChild(newNode);

  renderNode(node.left);
  renderNode(node.right);
}

renderNode(root);

可选优化 #

• 去重处理：随机数可能重复，插入BST前可以先对数组去重，避免节点值重复。
• 添加父子连线：可以用SVG或动态创建div作为连线，根据父子节点的坐标计算连线的起点和终点。

内容的提问来源于stack exchange，提问作者aayush juyal