d3-flextree
Version:
Flexible tree layout algorithm that allows for variable node sizes.
538 lines (536 loc) • 9.03 kB
JavaScript
// `data` specifies node sizes, and
// `expected` specifies the expected x and y coordinates.
export default [
{ desc: 'simplest possible tree',
data: [
100, 100,
],
expected: [
0, 0,
],
customSpacing: [
0, 0,
],
},
{ desc: 'simple tree',
data: [
30, 50,
[ 40, 70,
[ 50, 60 ],
[ 50, 100 ],
],
[ 20, 140,
[ 50, 60 ],
[ 50, 60 ],
],
[ 50, 60,
[ 50, 60 ],
[ 50, 60 ],
],
],
expected: [
0, 0,
[ -82.5, 50,
[ -107.5, 120 ],
[ -57.5, 120 ],
],
[ 17.5, 50,
[ -7.5, 190 ],
[ 42.5, 190 ],
],
[ 77.5, 50,
[ 52.5, 110 ],
[ 102.5, 110 ],
],
],
customSpacing: [
0, 0,
[ -109.5, 50,
[ -140.5, 120 ],
[ -78.5, 120 ],
],
[ 22.5, 50,
[ -8.5, 190 ],
[ 53.5, 190 ],
],
[ 104.5, 50,
[ 73.5, 110 ],
[ 135.5, 110 ],
],
],
},
{ desc: 'another simple tree',
data: [
40, 40,
[ 40, 40 ],
[ 40, 40,
[ 50, 40 ],
[ 50, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
],
[ 40, 40 ],
],
expected: [
0, 0,
[ -40, 40 ],
[ 0, 40,
[ -85, 80 ],
[ -35, 80 ],
[ 10, 80 ],
[ 50, 80 ],
[ 90, 80 ],
],
[ 40, 40 ],
],
customSpacing: [
0, 0,
[ -64, 40 ],
[ 0, 40,
[ -133, 80 ],
[ -59, 80 ],
[ 10, 80 ],
[ 74, 80 ],
[ 138, 80 ],
],
[ 64, 40 ],
],
},
{ desc: 'layout bug, simple case',
data: [
40, 40,
[ 40, 40 ],
[ 40, 40,
[ 100, 40 ],
[ 200, 40 ],
],
],
expected: [
0, 0,
[ -20, 40 ],
[ 20, 40,
[ -80, 80 ],
[ 70, 80 ],
],
],
customSpacing: [
0, 0,
[ -32, 40 ],
[ 32, 40,
[ -80, 80 ],
[ 94, 80 ],
],
],
},
{ desc: 'layout bug, redux',
data: [
40, 40,
[ 40, 40 ],
[ 40, 40,
[ 40, 40,
[ 100, 40 ],
[ 200, 40 ],
],
],
],
expected: [
0, 0,
[ -20, 40 ],
[ 20, 40,
[ 20, 80,
[ -80, 120 ],
[ 70, 120 ],
],
],
],
customSpacing: [
0, 0,
[ -32, 40 ],
[ 32, 40,
[ 32, 80,
[ -80, 120 ],
[ 94, 120 ],
],
],
],
},
{ desc: 'layout bug, third sibling',
data: [
40, 40,
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40,
[ 40, 40,
[ 100, 40 ],
[ 200, 40 ],
],
],
],
expected:
[ 0, 0,
[ -40, 40 ],
[ 0, 40 ],
[ 40, 40,
[ 40, 80,
[ -60, 120 ],
[ 90, 120 ],
],
],
],
customSpacing: [
0, 0,
[ -64, 40 ],
[ 0, 40 ],
[ 64, 40,
[ 64, 80,
[ -48, 120 ],
[ 126, 120 ],
],
],
],
},
// My first, naive attempt to fix the layout bug caused this tree's
// layout to break:
{ desc: 'narrower child',
data: [
20, 20,
[ 20, 40 ],
[ 20, 20,
[ 10, 20 ],
],
],
expected: [
0, 0,
[ -10, 20 ],
[ 10, 20,
[ 10, 40 ],
],
],
customSpacing: [
0, 0,
[ -13, 20 ],
[ 13, 20,
[ 13, 40 ],
],
],
},
{ desc: 'redistributed middle sibling - 0',
data: [
40, 40,
[ 40, 40,
[ 200, 200 ],
],
[ 40, 40 ],
[ 40, 40,
[ 200, 200 ],
],
],
expected: [
0, 0,
[ -100, 40,
[ -100, 80 ],
],
[ 0, 40 ],
[ 100, 40,
[ 100, 80 ],
],
],
customSpacing: [
0, 0,
[ -120, 40,
[ -120, 80 ],
],
[ 0, 40 ],
[ 120, 40,
[ 120, 80 ],
],
],
},
{ desc: 'redistributed middle siblings - 1',
data: [
40, 40,
[ 40, 40,
[ 40, 40,
[ 40, 40,
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
],
],
],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40 ],
[ 40, 40,
[ 40, 40,
[ 200, 200 ],
],
],
],
expected: [
0, 0,
[ -140, 40,
[ -140, 80,
[ -140, 120,
[ -300, 160 ],
[ -260, 160 ],
[ -220, 160 ],
[ -180, 160 ],
[ -140, 160 ],
[ -100, 160 ],
[ -60, 160 ],
[ -20, 160 ],
[ 20, 160 ],
],
],
],
[ -70, 40 ],
[ 0, 40 ],
[ 70, 40 ],
[ 140, 40,
[ 140, 80,
[ 140, 120 ],
],
],
],
customSpacing: [
0, 0,
[ -220, 40,
[ -220, 80,
[ -220, 120,
[ -476, 160 ],
[ -412, 160 ],
[ -348, 160 ],
[ -284, 160 ],
[ -220, 160 ],
[ -156, 160 ],
[ -92, 160 ],
[ -28, 160 ],
[ 36, 160 ],
],
],
],
[ -110, 40 ],
[ 0, 40 ],
[ 110, 40 ],
[ 220, 40,
[ 220, 80,
[ 220, 120 ],
],
],
],
},
{ desc: 'test extreme data',
data: [
40, 40,
[ 40, 40,
[ 40, 100,
[ 200, 40 ],
],
],
[ 40, 40,
[ 40, 40 ],
[ 40, 200 ],
[ 40, 40 ],
],
[ 40, 40,
[ 40, 100,
[ 200, 40 ],
],
],
],
expected: [
0, 0,
[ -120, 40,
[ -120, 80,
[ -120, 180 ],
],
],
[ 0, 40,
[ -40, 80 ],
[ 0, 80 ],
[ 40, 80 ],
],
[ 120, 40,
[ 120, 80,
[ 120, 180 ],
],
],
],
customSpacing: [
0, 0,
[ -168, 40,
[ -168, 80,
[ -168, 180 ],
],
],
[ 0, 40,
[ -64, 80 ],
[ 0, 80 ],
[ 64, 80 ],
],
[ 168, 40,
[ 168, 80,
[ 168, 180 ],
],
],
],
},
{ desc: 'test redistributing children, from van der Ploeg figure 6',
data: [
10, 10,
[ 10, 15,
[ 50, 10 ],
[ 50, 10,
[ 50, 10 ],
[ 50, 10 ],
],
],
[ 10, 10 ],
[ 10, 10 ],
[ 10, 20 ],
[ 10, 10 ],
[ 10, 30,
[ 50, 10 ],
],
],
expected: [
0, 0,
[ -50, 10,
[ -75, 25 ],
[ -25, 25,
[ -50, 35 ],
[ 0, 35 ],
],
],
[ -(26 + 2/3), 10 ],
[ -(3 + 1/3), 10 ],
[ 20, 10 ],
[ 35, 10 ],
[ 50, 10,
[ 50, 40 ],
],
],
customSpacing: [
0, 0,
[ -59, 10,
[ -87, 25 ],
[ -31, 25,
[ -59, 35 ],
[ -3, 35 ],
],
],
[ -33, 10 ],
[ -7, 10 ],
[ 19, 10 ],
[ 39, 10 ],
[ 59, 10,
[ 59, 40 ],
],
],
},
{ desc: 'modified figure 6 tree',
data: [
10, 10,
[ 10, 15,
[ 50, 10 ],
[ 50, 10,
[ 50, 10 ],
[ 50, 10 ],
],
],
[ 10, 10 ],
[ 10, 10 ],
[ 10, 20 ],
[ 10, 10 ],
],
expected: [
0, 0,
[ -32.5, 10,
[ -57.5, 25 ],
[ -7.5, 25,
[ -32.5, 35 ],
[ 17.5, 35 ],
],
],
[ -(14 + 1/6), 10 ],
[ 4 + 1/6, 10 ],
[ 22.5, 10 ],
[ 32.5, 10 ],
],
customSpacing: [
0, 0,
[ -41, 10,
[ -69, 25 ],
[ -13, 25,
[ -41, 35 ],
[ 15, 35 ],
],
],
[ -19, 10 ],
[ 3, 10 ],
[ 25, 10 ],
[ 41, 10 ],
],
},
{ desc: 'mirror image of figure 6 tree',
data: [
10, 10,
[ 10, 30,
[ 50, 10 ],
],
[ 10, 10 ],
[ 10, 20 ],
[ 10, 10 ],
[ 10, 10 ],
[ 10, 15,
[ 50, 12,
[ 50, 10 ],
[ 50, 8 ],
],
[ 50, 10 ],
],
],
expected: [
0, 0,
[ -50, 10,
[ -50, 40 ],
],
[ -35, 10 ],
[ -20, 10 ],
[ 3 + 1/3, 10 ],
[ 26 + 2/3, 10 ],
[ 50, 10,
[ 25, 25,
[ 0, 37 ],
[ 50, 37 ],
],
[ 75, 25 ],
],
],
customSpacing: [
0, 0,
[ -59, 10,
[ -59, 40 ],
],
[ -39, 10 ],
[ -19, 10 ],
[ 7, 10 ],
[ 33, 10 ],
[ 59, 10,
[ 31, 25,
[ 3, 37 ],
[ 59, 37 ],
],
[ 87, 25 ],
],
],
},
];