摘要：如何得到樹的深度這樣父節(jié)點與子結(jié)點在軸上最長的距離即為父節(jié)點與子結(jié)點在軸上最長的距離為正方形的長度，如何確定，假設(shè)的寬度為，由深度可知，樹的最大寬度為，最底層的正方形占據(jù)個。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 然后便可以揮毫潑墨了

const root = {
      value: "A",
      label: "100",
      left: {
        value: "B",
        label: "70",
        left: {
          value: "D",
          label: "40",
          left: {
            value: "H",
            label: "20",
            left: null,
            right: null
          },
          right: {
            value: "I",
            label: "20",
            left: null,
            right: null
          }
        },
        right: {
          value: "E",
          label: "30",
          left: null,
          right: null
        }
      },
      right: {
        value: "C",
        label: "30",
        left: {
          value: "F",
          label: "15",
          left: null,
          right: null
        },
        right: {
          value: "G",
          label: "15",
          left: null,
          right: null
        }
      }
    }

這樣一幅大作，無非就是由黑色的正方形+線段構(gòu)成
這正方形怎么畫

function drawRect(text, x, y, unit) {
  ctx.fillRect(x, y, unit, unit)
  // fillRect(x, y, width, height) 
  // x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點）的坐標(biāo)
  // width和height設(shè)置矩形的尺寸。
  ctx.font = "14px serif"
  ctx.fillText(text, x + unit, y + unit) // 再給每個正方形加個名字
}

這直線怎么畫

function drawLine(x1, y1, x2, y2) {
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.stroke()
}

這關(guān)系怎么畫

// 前序遍歷二叉樹
function preOrderTraverse(root, x, y){
  drawRect(root.value, x, y)
  if(root.left){
    drawLine(x, y, ...)
    preOrderTraverse(root.left, ...)
  }
  if(root.right){
    drawLine(x, y, ...)
    preOrderTraverse(root.right, ...)
  }
}

現(xiàn)在遇到個小問題，如何確定節(jié)點的子節(jié)的位置？

父節(jié)點與子結(jié)點在y軸上的距離固定，為正方形長度unit的兩倍；父節(jié)點與子結(jié)點在x軸上的距離滿足n2=(n1+2)*2-2，其中設(shè)父節(jié)點與子結(jié)點在x軸上最短的距離n0=1，即unit，而父節(jié)點與子結(jié)點在x軸上最長的距離取決于該樹的層數(shù)。
如何得到樹的深度？

function getDeepOfTree(root) {
  if (!root) {
    return 0
  }
  let left = getDeepOfTree(root.left)
  let right = getDeepOfTree(root.right)
  return (left > right) ? left + 1 : right + 1
}

這樣父節(jié)點與子結(jié)點在x軸上最長的距離

let distance = 1
const deep = getDeepOfTree(root)
for (let i = 2; i < deep; i++) {
  distance = (distance + 2) * 2 - 2
}
// distance*unit 即為父節(jié)點與子結(jié)點在x軸上最長的距離

unit為正方形的長度，如何確定，假設(shè)canvas的寬度為1000，由深度deep可知，樹的最大寬度為Math.pow(2, deep - 1)，最底層的正方形占據(jù)4個unit。

所以unit是如此計算，const unit = 1000 / (Math.pow(2, deep - 1) * 4 + 8)，+8是個備用空間。

實現(xiàn)移動至節(jié)點出現(xiàn)tooltip

首先要有tooltip

...
const tooltip = document.getElementById("tooltip")

由于canvas是一個整體元素，所以只能給canvas綁定事件，根據(jù)鼠標(biāo)的坐標(biāo)，判斷是否落在某個正方形區(qū)域內(nèi)
這里有個關(guān)健個函數(shù)

ctx.rect(0, 0, 100, 100)
ctx.isPointInPath(x, y)
// 判斷x，y是否落在剛剛由path繪制出的區(qū)域內(nèi)

所以在繪制正方形時還要將其path記下來

let pathArr = []
function preOrderTraverse(root, x, y, distance) {
  pathArr.push({
    x,
    y,
    value: root.value,
    label: root.label
  })
  // 記錄正方形左上角的位置，就可以重繪路徑
  drawRect(root.value, x, y) // 繪制節(jié)點
  if (root.left) {
    drawLeftLine(x, y + unit, distance)
    preOrderTraverse(root.left, x - (distance + 1) * unit, y + 3 * unit, distance / 2 - 1)
  }
  if (root.right) {
    drawRightLine(x + unit, y + unit, distance)
    preOrderTraverse(root.right, x + (distance + 1) * unit, y + 3 * unit, distance / 2 - 1)
  }
}

綁定事件

// 模擬鼠標(biāo)hover效果
canvas.addEventListener("mousemove", (e) => {
  let i = 0
  while (i < pathArr.length) {
    ctx.beginPath()
    ctx.rect(pathArr[i].x, pathArr[i].y, unit, unit)
    if (ctx.isPointInPath(e.offsetX, e.offsetY)) {
      canvas.style.cursor = "pointer"
      tooltip.innerHTML = `${pathArr[i].label}`
      tooltip.style.top = `${pathArr[i].y + unit + 4}px`
      tooltip.style.left = `${pathArr[i].x + unit}px`
      break
    } else {
      i++
    }
  }
  if (i === pathArr.length) {
    canvas.style.cursor = "default"
    tooltip.innerHTML = ``
  }
})

JSBin地址