Fishbone layout is a graphical layout method specifically designed to represent hierarchical data. By simulating the shape of a fishbone, it arranges data nodes according to their hierarchical structure, making the hierarchical relationships of the data clearer and more intuitive. The fishbone diagram layout is particularly suitable for datasets that need to display causal relationships, hierarchical structures, or classification information.

Options

isLayoutInvisibleNodes

boolean

Whether invisible nodes participate in the layout

Takes effect when preLayout is true

nodeFilter

(node: NodeData) => boolean

Nodes involved in the layout

preLayout

boolean

Use pre-layout to calculate the layout before initializing the elements

Not applicable to pipeline layout

Required type

string

Layout type

enableWorker

boolean

Whether to run the layout in WebWorker

iterations

number

Iterations for iterable layouts

direction

'RL' | 'LR' Default: ``

Layout direction

• 'RL' From right to left, the fish head is on the right

• 'LR' From left to right, the fish head is on the left

getRibSep

(node: NodeData) => number Default: () = 60

Get rib separation

height

number

Layout height

hGap

number

Get horizontal spacing

nodeSize

number | [number, number] | Float32Array | [number, number, number] | ((node: NodeData) => number | [number, number] | Float32Array | [number, number, number] )

Node size

vGap

number

Get vertical spacing

width

number

Layout width