Multi parent hierarchy - custom visual D3.js

filipwydra — Thu, 11 Nov 2021 12:29:21 GMT

Hello Guys !

I create hierarchy table and what I want to achieve is something like this below:

I know how to build hierarchy level for two categories and draw it, but I have a problem with 3 or more categories.

My dataset is flat array of objects. Every object has id and parentId. I'm using d3.stratify() to make hierarchy nodes. It works properly but once I add third category which has two or more parents it crush. I found somewhere that hierarchy where children have many parents is not hierarchy anymore but graph. Is it right ?

This is my stratify function:

const root = d3 .stratify() .id(function (d: any) { return d.name; }) .parentId(function (d: any) { return d.parentId; })(items);

This is my dataset transform when there is 3 categories:

yAxis.map((d, i) => { if (yAxis.length === 3) { if (i === 2) { const children = data.filter( (d) => d.name === d.yAxis[d.yAxis.length - 1] ); uniqArray.push(children); } else if (i === 1) { const children = data.filter((d) => d.name === d.yAxis[1]); const filteredChildren = children.filter(function (a) { var key = a.name + "|" + a.parentName; if (!this[key]) { this[key] = true; return true; } }, Object.create(null)); uniqArray.push(filteredChildren); } else { const children = data.filter((d) => !d.parentId); uniqArray.push(_.uniqBy(children, (d) => d.name)); } return [..._.flatten(uniqArray), { name: "root" }]; } }); return yAxis.length > 1 ? [..._.flatten(uniqArray), { name: "root" }] : [...data, { name: "root" }];

Did you ever face that problem ? Or maybe you have some solution.

I will be grateful for any advice how to do this.

Thanks!

topic Multi parent hierarchy - custom visual D3.js in Custom Visuals Development Discussion

Multi parent hierarchy - custom visual D3.js