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.