Collapsible D3.js Tree not collapsing

Question

Collapsible D3.js Tree not collapsing

44 Views Asked by nikkivno At 04 April 2025 at 01:45

I am working on mastering some D3 graphs and charts and am currently working on a collapsible tree. I have the tree visualized on the webpage but no matter what resources I go to I cannot get the tree to become interactive and have the nodes open and close the branches.

I have slowly been adding code based on documentation on the D3 Collapsible Tree example as well as other forums, youtube, and chatgbt, but everything I have looked at kind of gives me the same issue, where when I click the nodes, they do register that something is happening (they change colour and get a boarder around them) but they do not expand or collapse anything on the tree.

Any guidance would be greatly appreciated. I have a feeling I'm mixing up some things or missing a line or two of valuable code, but I'm so new to this I don't know how to go about problem solving it.

repo: https://github.com/nikkivno/d3.jsSamples

Here is the code that should be working to open and close the branches:

function toggle(d) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      treeLayout(rootNode);
      update();
    }

    function update() {
      const nodes = svg.selectAll(".node")
        .data(rootNode.descendants(), function(d) { return d.data.id; });
    
      const links = svg.selectAll(".link")
        .data(rootNode.links());

      const linkEnter = links.enter().insert("path", ".node")
        .attr("class", "link")
        .attr("d", d3.linkHorizontal()
          .x(function(d) { return d.y; })
          .y(function(d) { return d.x; })
        )
        .style("stroke", "#ccc")
        .style("stroke-width", 1);
    
      const nodeEnter = nodes.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
        .on("click", toggle);
    
      nodeEnter.append("circle")
        .attr("r", 5)
        .attr("fill", d => d._children ? "#555" : "#999")
        .attr("stroke-width", 10)
        .style('fill', 'white');
    
      nodeEnter.append("text")
        .attr("dy", ".31em")
        .attr("x", function(d) { return d.children ? -8 : 8; })
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .style("fill", "white")
        .text(function(d) { return d.data.name; })
        .attr("stroke-linejoin", "round");
    
      nodes.merge(nodeEnter).transition().duration(750)
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

      links.merge(linkEnter).transition().duration(750)
        .attr("d", d3.linkHorizontal()
        .x(function(d) { return d.y; })
        .y(function(d) { return d.x; })
      );

      nodes.exit().remove();
      links.exit().remove();
    }

Original Q&A

There are 1 best solutions below

**Mark** · Answer 1

Your issue is in the toggle function. In later versions of d3 the event callback passes the event as first argument and data as second. Try:

function toggle(e, d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  treeLayout(rootNode);
  update();
}

Running:

<!DOCTYPE html>
<html>
  <head>
    <title>Tree Graph</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Tourney:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
      html,
      body {
        background-color: black;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: block;
        justify-content: center;
        align-items: center;
      }

      body {
        border: 20px solid #fe019a;
        box-sizing: border-box;
      }

      h1 {
        color: white;
        font-family: 'Tourney', sans-serif;
        font-size: 150px;
        font-optical-sizing: auto;
        font-weight: 200;
        text-align: center;
      }

      ul {
        text-align: center;
      }

      ul > li {
        color: white;
        list-style-type: none;
        display: inline-block;
        padding: 20px;
      }

      button {
        font-size: 30px;
        font-family: 'Tourney', sans-serif;
        font-weight: 100;
        color: white;
        border: none;
        background-color: transparent;
      }

      button:hover {
        color: #fe019a;
      }

      #home {
        font-size: 20px;
      }

      h2 {
        font-family: 'Tourney', sans-serif;
        color: white;
        font-size: 60px;
        font-optical-sizing: auto;
        font-weight: 200;
        text-align: center;
        margin: 20px 0 0 0;
      }

      p {
        color: white;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
      }

      .main-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #collapsibleTree {
        margin-top: 75px;
      }

      /* Apply styles to nodes */
      .node circle {
        fill: #fe019a; /* Node circle color */
        stroke: #fe019a; /* Node circle border color */
        stroke-width: 2.5; /* Node circle border width */
      }

      .node text {
        fill: white; /* Node text color */
        font-family: Arial, Helvetica, sans-serif;
      }

      /* Apply styles to links */
      .link {
        fill: none;
        stroke: #fe019a; /* Link color */
        stroke-width: 1; /* Link width */
      }
    </style>
  </head>
  <body>
    <a href="./index.html"><button id="home">Home</button></a>
    <header>
      <h2>Collapsible Tree</h2>
    </header>
    <p>
      A Collapsible Tree example displaying a book genre with authors and their
      titles, both stand alones and series
    </p>

    <div class="main-container container">
      <div id="collapsibleTree"></div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        //d3.json("Assets/treedata.json").then(function (treeData) {
        const treeData = {
          name: 'Favourite Books',
          children: [
            {
              name: 'Stephen King',
              children: [
                {
                  name: 'Fairytale',
                },
                {
                  name: 'The Shining',
                },
              ],
            },
            {
              name: 'Grady Hendrix',
              children: [
                {
                  name: "The Southern Book Club's Guide to Slaying Vampires",
                },
                {
                  name: 'Horrorstör',
                },
                {
                  name: "My Best Friend's Excorcism",
                },
              ],
            },
            {
              name: 'Maureen Johnson',
              children: [
                {
                  name: 'Truly Devious Series',
                  children: [
                    {
                      name: 'Truly Devious',
                    },
                    {
                      name: 'The Vanishing Stair',
                    },
                    {
                      name: 'The Hand on the Wall',
                    },
                  ],
                },
              ],
            },
            {
              name: 'Maggie Stiefvater',
              children: [
                {
                  name: 'The Raven Cycle',
                  children: [
                    {
                      name: 'The Raven Boys',
                    },
                    {
                      name: 'The Dream Thieves',
                    },
                    {
                      name: 'Blue Lily, Lily Blue',
                    },
                    {
                      name: 'The Raven King',
                    },
                  ],
                },
              ],
            },
            {
              name: 'J.R.R. Tolkien',
              children: [
                {
                  name: 'The Hobbit',
                },
                {
                  name: 'The Lord of the Rings',
                  children: [
                    {
                      name: 'The Fellowship of the Ring',
                    },
                    {
                      name: 'The Two Towers',
                    },
                    {
                      name: 'The Return of the King',
                    },
                  ],
                },
                {
                  name: 'The Silmarillion',
                },
              ],
            },
          ],
        };

        const width = 800;
        const height = 400;

        const margin = { top: 50, right: 100, bottom: 50, left: 100 };
        const treeWidth = width - margin.left - margin.right;
        const treeHeight = height - margin.top - margin.bottom;

        const treeLayout = d3.tree().size([treeHeight, treeWidth]);

        const rootNode = d3.hierarchy(treeData);

        treeLayout(rootNode);

        const svg = d3
          .select('#collapsibleTree')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g');

        update();

        function toggle(e, d) {
          if (d.children) {
            d._children = d.children;
            d.children = null;
          } else {
            d.children = d._children;
            d._children = null;
          }
          treeLayout(rootNode);
          update();
        }

        function update() {
          // Update the nodes
          const nodes = svg
            .selectAll('.node')
            .data(rootNode.descendants(), function (d) {
              return d.data.id;
            });

          // Update the links
          const links = svg.selectAll('.link').data(rootNode.links());

          // Enter any new links at the parent's previous position.
          const linkEnter = links
            .enter()
            .insert('path', '.node')
            .attr('class', 'link')
            .attr(
              'd',
              d3
                .linkHorizontal()
                .x(function (d) {
                  return d.y;
                })
                .y(function (d) {
                  return d.x;
                })
            )
            .style('stroke', '#ccc')
            .style('stroke-width', 1);

          // Enter any new nodes at the parent's previous position.
          const nodeEnter = nodes
            .enter()
            .append('g')
            .attr('class', 'node')
            .attr('transform', function (d) {
              return 'translate(' + d.y + ',' + d.x + ')';
            })
            .on('click', toggle);

          nodeEnter
            .append('circle')
            .attr('r', 5)
            .attr('fill', (d) => (d._children ? '#555' : '#999'))
            .attr('stroke-width', 10)
            .style('fill', 'white');

          nodeEnter
            .append('text')
            .attr('dy', '.31em')
            .attr('x', function (d) {
              return d.children ? -8 : 8;
            })
            .style('text-anchor', function (d) {
              return d.children ? 'end' : 'start';
            })
            .style('fill', 'white')
            .text(function (d) {
              return d.data.name;
            })
            .attr('stroke-linejoin', 'round');

          // Transition nodes and links to their new positions.
          nodes
            .merge(nodeEnter)
            .transition()
            .duration(750)
            .attr('transform', function (d) {
              return 'translate(' + d.y + ',' + d.x + ')';
            });

          links
            .merge(linkEnter)
            .transition()
            .duration(750)
            .attr(
              'd',
              d3
                .linkHorizontal()
                .x(function (d) {
                  return d.y;
                })
                .y(function (d) {
                  return d.x;
                })
            );

          // Remove any exiting nodes
          nodes.exit().remove();
          links.exit().remove();
        }

        // });
      });
    </script>
  </body>
</html>

Collapsible D3.js Tree not collapsing

There are 1 best solutions below

Related Questions in D3.JS

Related Questions in D3-GRAPHVIZ

Related Questions in COLLAPSIBLETREE-R

Related Questions in TREECHART

Trending Questions

Popular # Hahtags

Popular Questions