Donut chart with partial ring around

Question

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):

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?

Answer 1

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:

Thanks for the help everyone!