jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://d3js.org/d3.v7.min.js"></script>

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

JavaScript

var treeData = {
  "name": "Top Level",
  "children": [{
      "name": "Child 1",
      "children": [{
          "name": "C1"
        },
        {
          "name": "C2"
        },
        {
          "name": "C3"
        },
        {
          "name": "C4"
        },
        {
          "name": "C5"
        },
        {
          "name": "C6"
        },
        {
          "name": "C7"
        },
        {
          "name": "C8"
        },
        {
          "name": "C9"
        },
        {
          "name": "C10"
        },
        {
          "name": "C11"
        },
        {
          "name": "C12"
        },
        {
          "name": "C13"
        },
        {
          "name": "C14"
        },
        {
          "name": "C15"
        },
        {
          "name": "C16"
        },
        {
          "name": "C17"
        },
        {
          "name": "C18"
        },
        {
          "name": "C19"
        },
        {
          "name": "C20"
        },
        {
          "name": "C21"
        },
      ]
    },
    {
      "name": "Child 2",
      "children": [{
          "name": "Son of Child 2"
        },
        {
          "name": "Daughter of Child 2"
        }
      ]
    }
  ]
};

// Set the dimensions and margins of the diagram
var margin = {
    top: 20,
    right: 90,
    bottom: 30,
    left: 90
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" +
    margin.left + "," + margin.top + ")");

var i = 0,
  duration = 750,
  root;

// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height,...