I generated the treemap below using the D3.js library. Parent nodes are filled in gray, leaves are filled white.
However, despite setting the sorting based on the values (determined by attribute “asize”) of my json file, I can’t get the treemap to be properly sorted by size.
Here is the excerpt in my js.
<code>const valueKey = 'asize';
const root = d3.hierarchy(data)
.sum(d => d[valueKey])
.sort((a, b) => b[valueKey] - a[valueKey]);
</code>
<code>const valueKey = 'asize';
const root = d3.hierarchy(data)
.sum(d => d[valueKey])
.sort((a, b) => b[valueKey] - a[valueKey]);
</code>
const valueKey = 'asize';
const root = d3.hierarchy(data)
.sum(d => d[valueKey])
.sort((a, b) => b[valueKey] - a[valueKey]);
Sample json to show format, “asize” attribute contains the values.
<code>{
"name": "budget",
"children": [
{
"name": ".git",
"children": [
{
"name": "config",
"asize": 298,
"ino": 2533274790936458
},
{
"name": "description",
"asize": 73,
"ino": 1688849860804465
}
]
}
]
}
</code>
<code>{
"name": "budget",
"children": [
{
"name": ".git",
"children": [
{
"name": "config",
"asize": 298,
"ino": 2533274790936458
},
{
"name": "description",
"asize": 73,
"ino": 1688849860804465
}
]
}
]
}
</code>
{
"name": "budget",
"children": [
{
"name": ".git",
"children": [
{
"name": "config",
"asize": 298,
"ino": 2533274790936458
},
{
"name": "description",
"asize": 73,
"ino": 1688849860804465
}
]
}
]
}
The relative size of budget
and allcharts
tiles is consistent with their total size (ncdu output below); however no sorting seems to be happening in the treemap.
<code> 2.1 MiB [##########] /budget
148.0 KiB [ ] /allcharts
100.0 KiB [ ] /zoomableD3
96.0 KiB [ ] /nested-treemap
72.0 KiB [ ] /zoom
12.0 KiB [ ] /sample3
12.0 KiB [ ] /treemap
</code>
<code> 2.1 MiB [##########] /budget
148.0 KiB [ ] /allcharts
100.0 KiB [ ] /zoomableD3
96.0 KiB [ ] /nested-treemap
72.0 KiB [ ] /zoom
12.0 KiB [ ] /sample3
12.0 KiB [ ] /treemap
</code>
2.1 MiB [##########] /budget
148.0 KiB [ ] /allcharts
100.0 KiB [ ] /zoomableD3
96.0 KiB [ ] /nested-treemap
72.0 KiB [ ] /zoom
12.0 KiB [ ] /sample3
12.0 KiB [ ] /treemap