test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

test: fishbone unit tests

Browse Source
This commit is contained in:
yvonneyx 2024-11-11 10:11:36 +08:00
parent 899d38431b
commit 275881b94c
6 changed files with 1342 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/g6/__tests__/demos/index.ts
View File

@ -96,6 +96,7 @@ export { layoutDagre } from './layout-dagre';
export { layoutDendrogramBasic } from './layout-dendrogram-basic';
export { layoutDendrogramRadial } from './layout-dendrogram-radial';
export { layoutDendrogramTb } from './layout-dendrogram-tb';
export { layoutFishbone } from './layout-fishbone';
export { layoutForce } from './layout-force';
export { layoutForceCollision } from './layout-force-collision';
export { layoutForceLattice } from './layout-force-lattice';

116
packages/g6/__tests__/demos/layout-fishbone.ts Normal file
View File

@ -0,0 +1,116 @@
import { Graph, treeToGraphData } from '@antv/g6';
const data = {
id: 'Quality',
children: [
{
id: 'Machine',
children: [{ id: 'Mill' }, { id: 'Mixer' }, { id: 'Metal Lathe', children: [{ id: 'Milling' }] }],
},
{ id: 'Method' },
{
id: 'Material',
children: [
{
id: 'Masonite',
children: [
{ id: 'spearMint' },
{ id: 'pepperMint', children: [{ id: 'test3' }] },
{ id: 'test1', children: [{ id: 'test4' }] },
],
},
{
id: 'Marscapone',
children: [{ id: 'Malty' }, { id: 'Minty' }],
},
{ id: 'Meat', children: [{ id: 'Mutton' }] },
],
},
{
id: 'Man Power',
children: [
{ id: 'Manager' },
{ id: "Master's Student" },
{ id: 'Magician' },
{ id: 'Miner' },
{ id: 'Magister', children: [{ id: 'Malpractice' }] },
{
id: 'Massage Artist',
children: [{ id: 'Masseur' }, { id: 'Masseuse' }],
},
],
},
{
id: 'Measurement',
children: [{ id: 'Malleability' }],
},
{
id: 'Milieu',
children: [{ id: 'Marine' }],
},
],
};
function randomInt(n) {
return Math.round(Math.random() * n);
}
function randomColor() {
return `rgba(${randomInt(255)}, ${randomInt(255)}, ${randomInt(255)}, ${Math.random()})`;
}
export const layoutFishbone: TestCase = async (context) => {
const graph = new Graph({
...context,
autoFit: 'view',
data: treeToGraphData(data),
node: {
type: 'rect',
style: {
size: [32, 32],
// fill: () => randomColor(),
label: false,
labelFill: '#262626',
labelFontFamily: 'Gill Sans',
labelMaxLines: 2,
labelMaxWidth: '100%',
labelPlacement: 'center',
labelText: (d) => d.id,
labelWordWrap: true,
},
},
edge: {
type: 'polyline',
style: {
lineWidth: 3,
},
},
layout: {
type: 'fishbone',
vGap: 48,
hGap: 48,
},
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
animation: false,
});
await graph.render();
layoutFishbone.form = (panel) => {
const config = {
type: 'fishbone',
direction: 'LR',
};
return [
panel
.add(config, 'direction', ['LR', 'RL'])
.name('Direction')
.onChange((value: string) => {
graph.setLayout((prev) => ({ ...prev, direction: value }));
graph.layout();
}),
];
};
return graph;
};

398
packages/g6/__tests__/snapshots/layouts/fishbone/direction-LR.svg Normal file
View File

@ -0,0 +1,398 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.275330,0,0,0.275330,-0.000015,187.775330)">
<g fill="none">
<g fill="none" class="elements">
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 32,250 L 76,250 L 300,474" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 32,250 L 392,250 L 424,218" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 32,250 L 500,250 L 868,618" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 32,250 L 960,250 L 1376,-166" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 32,250 L 1516,250 L 1596,330" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 32,250 L 1688,250 L 1768,170" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 300,474 L 124,298 L 172,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 300,474 L 172,346 L 220,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 300,474 L 220,394 L 316,394" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 316,394 L 268,394 L 300,426" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 868,618 L 548,298 L 836,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 868,618 L 692,442 L 836,442" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 868,618 L 788,538 L 884,538" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 836,298 L 596,298 L 628,330" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 836,298 L 644,298 L 724,378" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 836,298 L 740,298 L 820,378" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 724,378 L 692,346 L 740,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 820,378 L 788,346 L 836,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 836,442 L 740,442 L 772,474" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 836,442 L 788,442 L 820,474" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 884,538 L 836,538 L 868,570" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1376,-166 L 1008,202 L 1056,202" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1376,-166 L 1056,154 L 1104,154" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1376,-166 L 1104,106 L 1152,106" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1376,-166 L 1152,58 L 1200,58" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1376,-166 L 1200,10 L 1296,10" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1376,-166 L 1296,-86 L 1440,-86" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1296,10 L 1248,10 L 1280,-22" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1440,-86 L 1344,-86 L 1376,-118" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1440,-86 L 1392,-86 L 1424,-118" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1596,330 L 1564,298 L 1612,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 1768,170 L 1736,202 L 1784,202" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" x="16" y="250" transform="matrix(1,0,0,1,16,250)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="316" y="490" transform="matrix(1,0,0,1,316,490)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="188" y="298" transform="matrix(1,0,0,1,188,298)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="236" y="346" transform="matrix(1,0,0,1,236,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="332" y="394" transform="matrix(1,0,0,1,332,394)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="316" y="442" transform="matrix(1,0,0,1,316,442)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="440" y="202" transform="matrix(1,0,0,1,440,202)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="884" y="634" transform="matrix(1,0,0,1,884,634)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="852" y="298" transform="matrix(1,0,0,1,852,298)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="644" y="346" transform="matrix(1,0,0,1,644,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="740" y="394" transform="matrix(1,0,0,1,740,394)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="756" y="346" transform="matrix(1,0,0,1,756,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="836" y="394" transform="matrix(1,0,0,1,836,394)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="852" y="346" transform="matrix(1,0,0,1,852,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="852" y="442" transform="matrix(1,0,0,1,852,442)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="788" y="490" transform="matrix(1,0,0,1,788,490)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="836" y="490" transform="matrix(1,0,0,1,836,490)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="900" y="538" transform="matrix(1,0,0,1,900,538)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="884" y="586" transform="matrix(1,0,0,1,884,586)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1392" y="-182" transform="matrix(1,0,0,1,1392,-182)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1072" y="202" transform="matrix(1,0,0,1,1072,202)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1120" y="154" transform="matrix(1,0,0,1,1120,154)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1168" y="106" transform="matrix(1,0,0,1,1168,106)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1216" y="58" transform="matrix(1,0,0,1,1216,58)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1312" y="10" transform="matrix(1,0,0,1,1312,10)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1296" y="-38" transform="matrix(1,0,0,1,1296,-38)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1456" y="-86" transform="matrix(1,0,0,1,1456,-86)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1392" y="-134" transform="matrix(1,0,0,1,1392,-134)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1440" y="-134" transform="matrix(1,0,0,1,1440,-134)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1612" y="346" transform="matrix(1,0,0,1,1612,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1628" y="298" transform="matrix(1,0,0,1,1628,298)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1784" y="154" transform="matrix(1,0,0,1,1784,154)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="1800" y="202" transform="matrix(1,0,0,1,1800,202)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

398
packages/g6/__tests__/snapshots/layouts/fishbone/direction-RL.svg Normal file
View File

@ -0,0 +1,398 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.275330,0,0,0.275330,362.334808,187.775330)">
<g fill="none">
<g fill="none" class="elements">
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L 424,250 L 200,474" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L 108,250 L 76,218" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L 0,250 L -368,618" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L -460,250 L -876,-166" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L -1016,250 L -1096,330" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L -1188,250 L -1268,170" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 200,474 L 376,298 L 328,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 200,474 L 328,346 L 280,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 200,474 L 280,394 L 184,394" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 184,394 L 232,394 L 200,426" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -368,618 L -48,298 L -336,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -368,618 L -192,442 L -336,442" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -368,618 L -288,538 L -384,538" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -336,298 L -96,298 L -128,330" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -336,298 L -144,298 L -224,378" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -336,298 L -240,298 L -320,378" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -224,378 L -192,346 L -240,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -320,378 L -288,346 L -336,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -336,442 L -240,442 L -272,474" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -336,442 L -288,442 L -320,474" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -384,538 L -336,538 L -368,570" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -876,-166 L -508,202 L -556,202" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -876,-166 L -556,154 L -604,154" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -876,-166 L -604,106 L -652,106" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -876,-166 L -652,58 L -700,58" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -876,-166 L -700,10 L -796,10" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -876,-166 L -796,-86 L -940,-86" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -796,10 L -748,10 L -780,-22" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -940,-86 L -844,-86 L -876,-118" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -940,-86 L -892,-86 L -924,-118" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -1096,330 L -1064,298 L -1112,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -1268,170 L -1236,202 L -1284,202" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" x="484" y="250" transform="matrix(1,0,0,1,484,250)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="184" y="490" transform="matrix(1,0,0,1,184,490)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="312" y="298" transform="matrix(1,0,0,1,312,298)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="264" y="346" transform="matrix(1,0,0,1,264,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="168" y="394" transform="matrix(1,0,0,1,168,394)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="184" y="442" transform="matrix(1,0,0,1,184,442)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="60" y="202" transform="matrix(1,0,0,1,60,202)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-384" y="634" transform="matrix(1,0,0,1,-384,634)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-352" y="298" transform="matrix(1,0,0,1,-352,298)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-144" y="346" transform="matrix(1,0,0,1,-144,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-240" y="394" transform="matrix(1,0,0,1,-240,394)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-256" y="346" transform="matrix(1,0,0,1,-256,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-336" y="394" transform="matrix(1,0,0,1,-336,394)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-352" y="346" transform="matrix(1,0,0,1,-352,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-352" y="442" transform="matrix(1,0,0,1,-352,442)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-288" y="490" transform="matrix(1,0,0,1,-288,490)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-336" y="490" transform="matrix(1,0,0,1,-336,490)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-400" y="538" transform="matrix(1,0,0,1,-400,538)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-384" y="586" transform="matrix(1,0,0,1,-384,586)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-892" y="-182" transform="matrix(1,0,0,1,-892,-182)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-572" y="202" transform="matrix(1,0,0,1,-572,202)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-620" y="154" transform="matrix(1,0,0,1,-620,154)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-668" y="106" transform="matrix(1,0,0,1,-668,106)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-716" y="58" transform="matrix(1,0,0,1,-716,58)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-812" y="10" transform="matrix(1,0,0,1,-812,10)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-796" y="-38" transform="matrix(1,0,0,1,-796,-38)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-956" y="-86" transform="matrix(1,0,0,1,-956,-86)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-892" y="-134" transform="matrix(1,0,0,1,-892,-134)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-940" y="-134" transform="matrix(1,0,0,1,-940,-134)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-1112" y="346" transform="matrix(1,0,0,1,-1112,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-1128" y="298" transform="matrix(1,0,0,1,-1128,298)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-1284" y="154" transform="matrix(1,0,0,1,-1284,154)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-1300" y="202" transform="matrix(1,0,0,1,-1300,202)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

398
packages/g6/__tests__/snapshots/layouts/fishbone/vGap-32-hGap-32.svg Normal file
View File

@ -0,0 +1,398 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.365497,0,0,0.365497,317.251465,164.473679)">
<g fill="none">
<g fill="none" class="elements">
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L 424,250 L 280,394" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L 188,250 L 172,234" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L 96,250 L -144,490" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L -236,250 L -508,-22" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L -632,250 L -680,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 468,250 L -772,250 L -820,202" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 280,394 L 392,282 L 360,282" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 280,394 L 360,314 L 328,314" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 280,394 L 328,346 L 264,346" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M 264,346 L 296,346 L 280,362" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -144,490 L 64,282 L -128,282" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -144,490 L -32,378 L -128,378" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -144,490 L -96,442 L -160,442" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -128,282 L 32,282 L 16,298" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -128,282 L 0,282 L -48,330" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -128,282 L -64,282 L -112,330" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -48,330 L -32,314 L -64,314" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -112,330 L -96,314 L -128,314" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -128,378 L -64,378 L -80,394" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -128,378 L -96,378 L -112,394" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -160,442 L -128,442 L -144,458" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -508,-22 L -268,218 L -300,218" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -508,-22 L -300,186 L -332,186" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -508,-22 L -332,154 L -364,154" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -508,-22 L -364,122 L -396,122" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -508,-22 L -396,90 L -460,90" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -508,-22 L -460,26 L -556,26" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -460,90 L -428,90 L -444,74" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -556,26 L -492,26 L -508,10" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -556,26 L -524,26 L -540,10" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -680,298 L -664,282 L -696,282" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g>
<path fill="none" d="M -820,202 L -804,218 L -836,218" class="key" stroke-width="3" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" class="key" stroke-width="5" stroke="transparent"/>
</g>
</g>
<g fill="none" x="484" y="250" transform="matrix(1,0,0,1,484,250)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="264" y="410" transform="matrix(1,0,0,1,264,410)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="344" y="282" transform="matrix(1,0,0,1,344,282)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="312" y="314" transform="matrix(1,0,0,1,312,314)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="248" y="346" transform="matrix(1,0,0,1,248,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="264" y="378" transform="matrix(1,0,0,1,264,378)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="156" y="218" transform="matrix(1,0,0,1,156,218)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-160" y="506" transform="matrix(1,0,0,1,-160,506)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-144" y="282" transform="matrix(1,0,0,1,-144,282)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="0" y="314" transform="matrix(1,0,0,1,0,314)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-64" y="346" transform="matrix(1,0,0,1,-64,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-80" y="314" transform="matrix(1,0,0,1,-80,314)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-128" y="346" transform="matrix(1,0,0,1,-128,346)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-144" y="314" transform="matrix(1,0,0,1,-144,314)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-144" y="378" transform="matrix(1,0,0,1,-144,378)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-96" y="410" transform="matrix(1,0,0,1,-96,410)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-128" y="410" transform="matrix(1,0,0,1,-128,410)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-176" y="442" transform="matrix(1,0,0,1,-176,442)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-160" y="474" transform="matrix(1,0,0,1,-160,474)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-524" y="-38" transform="matrix(1,0,0,1,-524,-38)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-316" y="218" transform="matrix(1,0,0,1,-316,218)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-348" y="186" transform="matrix(1,0,0,1,-348,186)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-380" y="154" transform="matrix(1,0,0,1,-380,154)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-412" y="122" transform="matrix(1,0,0,1,-412,122)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-476" y="90" transform="matrix(1,0,0,1,-476,90)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-460" y="58" transform="matrix(1,0,0,1,-460,58)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-572" y="26" transform="matrix(1,0,0,1,-572,26)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-524" y="-6" transform="matrix(1,0,0,1,-524,-6)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-556" y="-6" transform="matrix(1,0,0,1,-556,-6)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-696" y="314" transform="matrix(1,0,0,1,-696,314)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-712" y="282" transform="matrix(1,0,0,1,-712,282)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-836" y="186" transform="matrix(1,0,0,1,-836,186)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
<g fill="none" x="-852" y="218" transform="matrix(1,0,0,1,-852,218)">
<g>
<path fill="rgba(23,131,255,1)" d="M -16,-16 l 32,0 l 0,32 l-32 0 z" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" width="32" height="32" x="-16" y="-16"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

31
packages/g6/__tests__/unit/layouts/fishbone.spec.ts Normal file
View File

@ -0,0 +1,31 @@
import type { Graph } from '@/src';
import { layoutFishbone } from '@@/demos/layout-fishbone';
import { createDemoGraph } from '@@/utils';
describe('fishbone', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(layoutFishbone);
});
afterAll(() => {
graph.destroy();
});
it('default', async () => {
await expect(graph).toMatchSnapshot(__filename, 'direction-LR');
});
it('direction RL', async () => {
graph.setLayout((prev) => ({ ...prev, type: 'fishbone', direction: 'RL' }));
await graph.render();
await expect(graph).toMatchSnapshot(__filename, 'direction-RL');
});
it('vGap and hGap', async () => {
graph.setLayout((prev) => ({ ...prev, type: 'fishbone', vGap: 32, hGap: 32 }));
await graph.render();
await expect(graph).toMatchSnapshot(__filename, 'vGap-32-hGap-32');
});
});