Developer D3 chart
For all common D3 chart properties, refer to D3 chart API.
RadialTree
This chart has children Title component.
js
import { RadialTree } from 'intergalactic/d3-chart';
<RadialTree>
<RadialTree.Radian>
<RadialTree.Radian.Label />
<RadialTree.Radian.Line />
<RadialTree.Radian.Cap />
<RadialTree.Radian.Icon />
</RadialTree.Radian>
<RadialTree.Title></RadialTree.Title>
</RadialTree>;import { RadialTree } from 'intergalactic/d3-chart';
<RadialTree>
<RadialTree.Radian>
<RadialTree.Radian.Label />
<RadialTree.Radian.Line />
<RadialTree.Radian.Cap />
<RadialTree.Radian.Icon />
</RadialTree.Radian>
<RadialTree.Title></RadialTree.Title>
</RadialTree>;RadialTreeProps
| Name | Type | Description |
|---|---|---|
| data | [] | List of radians. `{ label: string; key: string; capSize?: number; icon?: React.FC; color?: string; iconColor?: string; iconSize?: number; }` |
| angleOffset | number | Angel (in rads) that rotates chart. 0 means that first radian is exactly on top vertical line. |
| duration | number | Duration of appear and update animation. |
| centralMargin | number | Gap between the chart center and radians start point. |
| labelMargin | number | Gap around text label. |
| color | string | Color of all radian's line, cap and label. |
| capSize | number | Size of the cap (filled circle on the end of the radian). |
| icon | React.FC | Icon, that displayed in the cap of the active radian (usage example `icon: UserM`). |
| iconColor | string | Color of icon. |
| iconSize | number | Size of icon. |
| textSize | number | Text size in radians' labels. 1.5x is used as default text size of center text. |
| activeKey | string | null | Used to define the active radian in controlled way. Active radian is highlighted with inreased cap size. |
| onActiveKeyChange | (activeKey: string | null) => void | |
| defaultActiveKey | string | null | Default value for `activeKey` property. |
| transparent | boolean | Enables element transparency |