Other optional components provided as slot implementation

Besides sunburst component, Vue.D3.Sunburst provides additional optional components that can be used out of the box as slot implementations.
There are two kinds of additional components:

the "renderfull" components provide visual additional visual information on the nodes. They can be used as legend or top slots.

the renderless components provide predefined behaviors for the sunburst components. They can be used as default slots. It is possible to combine behavior using a root template slot element as in the example.

"Renderfull" components

breadcrumbTrail

Breadcrumb trail component displaying path between root node and current node. Can be used as a legend slot of sunburst component.

props

rootObject (optional)

Root node

currentObject (optional)

Current node

fromObject (optional)

Reference node, parents nodes of the current will have an opacity below 1

color-getterFunction (required)

ColorGetter exposed by sunburst

widthNumber (optional)

Sunburst width

orderNumber (optional) default: 1

Css Order. If 1 the slot is displayed below the sunburst, if 0 the slot is displayed on top the sunburst

item-widthNumber (optional) default: 80

Bread crumb item width

item-heightNumber (optional) default: 30

Bread crumb item height

spacingNumber (optional) default: 3

Spacing between breadcrumb items

tail-widthNumber (optional) default: 10

With of tailing element

nodeInfoDisplayer

Component that display the percentage value of the current node relative to root. Can be used as a "top" slot of sunburst component.

props

rootObject (optional)

Root node

currentObject (optional)

Current node

clickedObject (optional)

Clicked node

descriptionString (required)

Text to be displayed

show-all-numberBoolean (optional) default: true

Show fraction format of size if true

computed properties

percentage

dependencies:current, root, current, base

displayPercentage

dependencies:percentage

show

dependencies:percentage

Behavioral

These components can be used as a default slot of the sunburst component which received as attributes:

nodes which is an object containing the attributes:

root: the graph root node

clicked: the last clicked node or null

mouseOver: the last node that received a mouse-over event or null if the mouse leaves the graph

zoomed: the zoomed node

highlighted: the highlighted node

actions which is an object containing the attributes:

highlightPath: function that takes a node and highlight the path going from the root to the given node

zoomToNode: function that takes a node and zoom to the corresponding node

resetHighlight: function that resets the highlighting

zoomOnClick

Renderless component providing the zoom on click behavior.
Can be used as a default slot of sunburst component.

props

nodesObject (optional)

Sunburst nodes. Typically provided by sunburst default slot.

actionsObject (required)

Sunburst actions. Typically provided by sunburst default slot.

highlightOnHover

Renderless component providing path highlighting on mouse over behavior.
Can be used as a default slot of sunburst component.