Context pie menu for SVG desktop apps
Instructions
Hold down the mouse button and nudge the perimeter to traverse/select. Once you've traversed, select the black bar to navigate backwards in the hierarchy.
Implemented correctly, a pie menu becomes a gui for gestures. This implementation, d3-sunburst-menu, moves the menu along the mouse cursor's "edge normal vector", allowing for speedy spatial navigation.
The primary use-case is as a context menu for data exploration, especially force networks.
Installation
npm install d3-sunburst-menu
Normally you'd attach a right-click to:
d3_sunburst_menu(tree, node, container);
where
tree is a nested json of menu items (line 115 in this example)node is the right-clicked (force-directed) node. Must contain [x,y] attributescontainer is the root svg object
Selecting a tree leaf invokes a callback: console.log(this.id); in this case.
Normally, you would perform some action and close the menu.
Have fun, experiment and report any issues.
Christian Lagerkvist, 2022
