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 Correct Left Link</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,...