d3-org-chart if children are more than 5 then display next line/row.

[Vivekptl25]

Hi, I am using d3-org-chart library in my react project. I have 18 children under parent node and I want to split the children as 5 per row. I have tried multiple times but it is not working.

I tried using layoutBinding property but it is not rendering the chart itself. .layoutBinding(function(d: any) { // Custom layout logic const childrenPerRow = 4; // Number of children per row if (d.children) { d.children.forEach((child, index) => { const row = Math.floor(index / childrenPerRow); const col = index % childrenPerRow; child.x = d.x + col 100; // Adjust x position child.y = d.y + row 100; // Adjust y position }); } return d; })

onNodeClick it is not applying the new coordinates to chart. chart.onNodeClick(function(d) { const childrenPerRow = 4; // Set the number of children per row if (d.children && d.children.length > childrenPerRow) { d.children.forEach((child, index) => { const row = Math.floor(index / childrenPerRow); const col = index % childrenPerRow; child.x = d.x + col 100; // Adjust x position child.y = d.y + row 100; // Adjust y position }); chart.update(d); } });

Attached the image for your reference.

[bumbeishvili]

This library does not support that kind of layout

[Vivekptl25]

Thank @bumbeishvili for your response. Do you have any alternative suggestions for handling such scenarios? Appreciate your help on this because it is kind of show stopper for us.