CODEWITHSUNDEEP
d3.js
EsTeGe
EsTeGe

Reputation: 3055

Donut chart with partial ring around

I'm building a context menu using D3.js donut chart. Now I'd like to add a submenu when mousehovering a certain element, like this (sorry for my paint skills):

Menu sketch

The main donut menu is already done, but I can't figure out how to add the submenu. It must be centered around the parent element (the element that has the subitems), because other menu items in the main menu might also have a submenu.

I already looked into this question: D3.js - Donut charts with multiple rings but those are full rings.

Anyone an example?

Upvotes: 3

Views: 2355

Answers (1)

EsTeGe
EsTeGe

Reputation: 3055

I managed to get it working! I used startAngle, endAngle, innerRadius and outerRadius.

Only the centering around the parent element isn't done yet. I just place the submenu always on top now. This is the result:

Context menu

Thanks for the help everyone!

Upvotes: 4

Related Questions