A Svelte.js component for displaying and browsing hierarchical data using zoomable circles
Built with Svelte and D3.js
Live demo: openopensource.com
<script>
import ZoomableCircles from "svelte-zoomable-circles";
</script>
<ZoomableCircles tree={treeObject} />
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 |