CODEWITHSUNDEEP
javascriptd3.js
g_raham
g_raham

Reputation: 55

How can I change the size of the innermost circle in a D3 zoomable sunburst?

There are lots of "zoomable sunburst" D3.js examples out there, like this. In these examples, the innermost circle starts out large, but after you zoom down a level the circle is small and remains the same size until you zoom back out to the highest level.

I'd like to have that innermost circle stay the same size throughout in order to have information at the center of the visualization. In my case, when a user hovers their mouse over a node, information about that node would appear at the center of the sunburst.

Is there a way to change the size of that innermost circle? What variables would I need to change? I'm thinking it might have to do with interacting with the radius variable in the click function?

Upvotes: 0

Views: 293

Answers (1)

Razor
Razor

Reputation: 720

Please find this edited example in plunker here: https://plnkr.co/edit/9iDdZ2auIJQokr1Yb9il?p=preview

I have added this variable innerCircleScale that you can edit to change the size of the inner circle. Initially it was 20. I find 100 to be ideal here.

If you go above 100 it starts to show 2 inner circles (parent and parent of parent).

Upvotes: 0

Related Questions