Can a node be collapsed depending on the number of children or subordinates it has?

[gustavog6]

Hi!

I have a requirement that basically is that I need to be able to initially show all descendant nodes as collapsed if they exceed x amount, and the amount will also vary depending on the depth of the node.

It would be something like this:

if (node.depth == 1 && node.quantityOfChildrens > 2) return collapse
if (node.depth == 2 && node.quantityOfChildrens > 5) return collapse

I really don't know how to manipulate the chart to achieve this, so I'm looking forward to seeing if any of you have already implemented something similar or have a better idea

[bumbeishvili]

@gustavog6 I guess you will need to manually manipulate _expanded property which controls which node (and siblings) are visible.

Rough code is here

https://stackblitz.com/edit/js-lc9xkw?file=index.html

  d3.csv(
    'https://raw.githubusercontent.com/bumbeishvili/sample-data/main/data-oracle.csv'
  ).then((data) => {
    const hierarchical = d3.stratify()(data);
    console.log(hierarchical);
    hierarchical.each((item) => {
      console.log({ item });
      if (item.children.length > 2) {
        item.data._expanded = false;
      } else {
        item.data._expanded = true;
      }

      if (!item.data._expanded) {
        const descendants = item.descendants();
        descendants.forEach((d) => (d.data._expanded = false));
      }
    });
    console.log(hierarchical);
    new d3.OrgChart()
      .container('.chart-container')
      .initialExpandLevel(0)
      .data(data)
      .render();
  });

[gustavog6]

@gustavog6 I guess you will need to manually manipulate _expanded property which controls which node (and siblings) are visible.

Rough code is here

https://stackblitz.com/edit/js-lc9xkw?file=index.html

  d3.csv(
    'https://raw.githubusercontent.com/bumbeishvili/sample-data/main/data-oracle.csv'
  ).then((data) => {
    const hierarchical = d3.stratify()(data);
    console.log(hierarchical);
    hierarchical.each((item) => {
      console.log({ item });
      if (item.children.length > 2) {
        item.data._expanded = false;
      } else {
        item.data._expanded = true;
      }

      if (!item.data._expanded) {
        const descendants = item.descendants();
        descendants.forEach((d) => (d.data._expanded = false));
      }
    });
    console.log(hierarchical);
    new d3.OrgChart()
      .container('.chart-container')
      .initialExpandLevel(0)
      .data(data)
      .render();
  });

Oh I thought I could collapse node by node in a similar way to how I define the width of each node:

.nodeWidth((d) => {
if (d.depth == 0) return 250;
if (d.depth == 1) return 230;
return 200;
})

only by getting the value of d.data._directSubordinates and setting _expanded true or false depending on the case inside some listener. Isn't there a way to do it like this? cause I have a problem with the stratify parsing my data to hierarchy

[bumbeishvili]

I don't think that there is other way

cause I have a problem with the stratify parsing my data to the hierarchy

org chart uses stratify for your data, so just make sure that correct id and parent id are referenced

org-chart/src/d3-org-chart.js

Line 1407 in cb1f376

attrs.generateRoot = d3