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, mousept, container);

where

tree is a nested json of menu items (line 115 in this example)

mousept is the [x,y] position of the meny (as obtained by d3.mouse(this);

container 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, 2020