JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Horizontal D3 Tree with Rect Nodes and Panning</title>
  <style>
    canvas {
      border: 1px solid #aaa;
      cursor: grab;
    }
    canvas:active {
      cursor: grabbing;
    }
  </style>
</head>
<body>
<canvas id="treeCanvas" width="1400" height="800"></canvas>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  const canvas = document.getElementById("treeCanvas");
  const ctx = canvas.getContext("2d");
  const width = canvas.width;
  const height = canvas.height;

  // Initial pan offset
  let panX = 0, panY = 0;
  let isDragging = false;
  let lastX, lastY;

  // Enhanced test data
  const data = {
    name: "Root", width: 110, height: 45,
    children: [
      {
        name: "Child A", width: 80, height: 35,
        children: Array.from({ length: 6 }, (_, i) => ({
          name: `Leaf A${i + 1}`,
          width: 60 + Math.random() * 40,
          height: 25 + Math.random() * 15
        }))
      },
      {
        name: "Child B", width: 90, height: 40,
        children: [
          {
            name: "Grandchild B1", width: 70, height: 30,
            children: [
              { name: "Great-Grandchild B1a", width: 60, height: 24 },
              { name: "Great-Grandchild B1b", width: 75, height: 28 }
            ]
          },
          {
            name: "Grandchild B2", width: 85, height: 35,
            children: [
              { name: "Great-Grandchild B2a", width: 65, height: 26 }
            ]
          }
        ]
      },
      {
        name: "Child C", width: 100, height: 50,
        children: [
          { name: "Grandchild C1", width: 60, height: 30 },
          { name: "Grandchild C2", width: 70, height: 35 },
          {
            name: "Grandchild C3", width: 75, height: 40,
            children: [
              { name: "Leaf C3a", width: 50, height: 20 },
              { name: "Leaf C3b", width: 60, height: 25 },
              { name: "Leaf...