Public
Edited
Jun 5, 2023
2 forks
3 stars
dataFlat = [
{ id: 1, parentId: null, name: "Person 1" },
{ id: 2, parentId: 1, name: "Person 2" },
{ id: 3, parentId: 1, name: "Person 3" },
{ id: 4, parentId: 2, name: "Person 4" },
{ id: 5, parentId: 2, name: "Person 5" },
{ id: 6, parentId: 3, name: "Person 6" },
{ id: 7, parentId: 3, name: "Person 7" },
{ id: 8, parentId: 4, name: "Person 8" },
{ id: 9, parentId: 4, name: "Person 9" },
{ id: 10, parentId: 4, name: "Person 10" }
]
dataHierarchy = ({
id: 1,
children: [
{
id: 2,
children: [
{
id: 4,
children: [
{ id: 8, name: "Person 8" },
{ id: 9, name: "Person 9" },
{ id: 10, name: "Person 10" }
],
name: "Person 4"
},
{ id: 5, name: "Person 5" }
],
name: "Person 2"
},
{
id: 3,
children: [
{ id: 6, name: "Person 6" },
{ id: 7, name: "Person 7" }
],
name: "Person 3"
}
],
name: "Person 1"
})
fh = d3.hierarchy(dataHierarchy)
fhDescendants = fh.descendants()
fhWithParents = fhDescendants.map((d) => [d.parent?.data?.id, d.data])
toFlat = fhWithParents.map(([parentId, data]) => {
const copy = { ...data };
delete copy.children;
return { ...copy, ...{ parentId } };
})
d3
.hierarchy(dataHierarchy)
.descendants()
.map((d) => [d.parent?.data?.id, d.data])
.map(([parentId, data]) => {
const copy = { ...data };
delete copy.children;
return { ...copy, ...{ parentId } };
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
stratified = d3.stratify()(dataFlat)
copied = stratified.copy()
copied.each((d) => {
delete d.height;
delete d.depth;
delete d.parent;
const data = d.data;
delete d.data;
Object.assign(d, data);
delete d.parentId;
})
toHierarchy = d3
.stratify()(dataFlat)
.each((d) => {
delete d.height;
delete d.depth;
delete d.parent;
const data = d.data;
delete d.data;
Object.assign(d, data);
delete d.parentId;
})
dataFlat
h = d3.stratify()(dataFlat)
{
const result = {
each: [],
eachAfter: [],
eachBefore: []
};
h.each((d) => result.each.push(d));
h.eachAfter((d) => result.eachAfter.push(d));
h.eachBefore((d) => result.eachBefore.push(d));
return result;
}
h.descendants()
h.descendants()[1].ancestors()
h.leaves()
h.descendants()[1].parent
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
