jQuery addClass example

Change class name on click in jQuery

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<div id="hierarchicalTree"></div>

CSS

.chart {
  display: block;
  margin: auto;
  margin-top: 60px;
  font-size: 11px;
}
rect {
  stroke: #eee;
  fill: #aaa;
  fill-opacity: 0.8;
}
rect.parent {
  cursor: pointer;
  fill: steelblue;
}
text {
  pointer-events: none;
}

JavaScript

resp = {
  name: "flare",
  children: [
    {
      name: "analytics",
      children: [
        {
          name: "cluster",
          children: [
            {
              name: "AgglomerativeCluster",
              value: 3938
            },
            {
              name: "CommunityStructure",
              value: 3812
            },
            {
              name: "HierarchicalCluster",
              value: 6714
            },
            {
              name: "MergeEdge",
              value: 743
            }
          ]
        },
        {
          name: "graph",
          children: [
            {
              name: "BetweennessCentrality",
              value: 3534
            },
            {
              name: "LinkDistance",
              value: 5731
            },
            {
              name: "MaxFlowMinCut",
              value: 7840
            },
            {
              name: "ShortestPaths",
              value: 5914
            },
            {
              name: "SpanningTree",
              value: 3416
            }
          ]
        },
        {
          name: "optimization",
          children: [
            {
              name: "AspectRatioBanker",
              value: 7074
            }
          ]
        }
      ]
    },
    {
      name: "animate",
      children: [
        {
          name: "Easing",
          value: 17010
        },
        {
          name: "FunctionSequence",
          value: 5842
        },
        {
          name: "interpolate",
          children: [
            {
              name: "ArrayInterpolator",
              value: 1983
            },
            {
              name: "ColorInterpolator",
              value: 2047
            },
            {
              name: "DateInterpolator",
              value: 1375
            },
            {
              name: "Interpolator",
              value: 8746
            },
            {
              name: "MatrixInterpolator",
            ...