A [Svelte.js](https://svelte.dev/) component for displaying and browsing hierarchical data using zoomable circles
npm install svelte-zoomable-circlesA Svelte.js component for displaying and browsing hierarchical data using zoomable circles
Built with Svelte and D3.js
!demo
Live demo: openopensource.com
``
`
The tree object must be a JSON object in the following format:
`
export const sampleTree = {
name: "Root",
children: [
{
name: "Child 1",
children: [
{
name: "Child 1.1",
value: 1000
},
{
name: "Child 1.2",
value: 500
},
{
name: "Child 1.3",
value: 250
},
]
},
{
name: "Child2",
value: 800
},
{
name: "Child3",
value: 600
},
]
}
`
| Prop | Type | Default | Description |
|---------------------------|-----------------------|-----------------|-----------------------------------------------|
| tree | object | sampleTree | Component data |svgHeight
| | number | 300 | Container height |svgWidth
| | number | 300 | Container width |startColor
| | string (hex code) | #555 | Start color for node color gradient |endColor
| | string (hex code) | #ccc | End color for node gradient |textFillColor
| | string (hex code) | #000 | Color of node labels |circleHoverStrokeColor
| | string (hex code) | #000 | Color of circle outline on hover |circleHoverStrokeWidth
| | number | 3 | Width of circle outline on hover in px |textFontSize
| | number | 25 | Size of label font in px |padding
| | number | 100 | Transition duration (ms) |zoomDurationMs
| | number | 500` | Enables autoplay of pages |