A d3js multilevel circular (pie) menu





GitHub Stars



Last Commit

2yrs ago








Type Definitions





Release 1.0.11 (3 March 2020)

  • Added settings for maxRadius and nudgeTolerance
  • Replaced parameter n ({x,y}) with mousept ([x,y]) as returned by d3.mouse().
  • The callback called by invoked menu items now obtains the selected node as parameter

Release 1.0.10

  • IE11 compatibility: graceful menu coloring if no svg gradients support
  • IE11 compatilibity: fixed regexp to recognise space as transform parameter delimiter (along with comma)
  • You'll need a polyfill (such as es6-promise)

Release 1.0.8

  • Added support for then-able promises (see demo) if _children is a promise, d3-sunburst-menu will add a loading indicator until the promise is resolved.

D3 Sunburst Menu

A d3js multilevel circular (pie) menu, quite undocumented at the moment. Here's a demo

Pie menus are a graphical user interface for mouse gestures. This particular implementation is traversed through nudging the edge and holding still (upon which the menu will traverse after a threshold of 0.3s).


  • Visualise any tree structure as a traversable, circular partition menu
  • Traverse and select nodes by nudging the edge
  • Each leaf node should have a function callback() {}, invoked upon selection.
  • Automatic gradients and curved labels, although if a level contains more than 10 children, it's recommended to add ["text-align"] = "radiate" to those children, causing the labels to emancipate from the center.

sunburst_menu returns an object with a redraw function, so that the partition can be altered (in my case waiting for several REST services to return menu data) and then updated through a call to redraw().

##Installation $ npm install d3-sunburst-menu

##Inclusion Using webpack, in your entry.js file: var d3_sunburst_menu = require('d3-sunburst-menu');

Initialize by: var menucontroller = d3_sunburst_menu(tree, node, svg_container);

Don't like front tooling like webpack?

<script> var module = {}; </script>
<script src="local/path/to/d3-sunburst-menu.js" type="text/javascript" charset="utf-8"></script>
<script>var menucontroller = module.exports(tree, node, svg_container);</script>


  • tree is a d3 partition tree with a BIG NOTE: "children" arrays must be named "_children" (with a preceding underscore). This in order to allow for a menu instance to be redrawn with new nodes. (Fixable, although not my top priority.)
  • mousept is an array of (svg) coordinates (as obtained by d3.mouse()) saying where to position the center of the menu.
  • svg_container is the d3 selection that will host the menu (as obtained by d3.select). Typically your main svg app element.

Redraw by: treecontroller.redraw();

Remove by: treecontroller.remove();

##Settings The first few lines of d3-sunburst-menu.js offers a number of settings:

var radius = _radius = 140;
var hue = d3.scale.category10(); // if node parents don't specify a fill attribute (i.e. a color)
var backSize = 0.1; // back button size as percent of full circle
var currentArc, currentNode = tree; // start traversal at root level
var idleTime = 300; // time (ms) between edge nudge and traversal
var padAngle = 0.01;
var dropshadow = false; // true = performance killer
var cornerRadius = 4; // 4 is neat but causes transition flickering if root has exactly two children
var loaderDuration = 4000; // duration of loading arcs in ms
var menu_level_scope = 2; // number of menu levels to visualise together
var maxRadius = 190; // max size of menu
var nudgeTolerance = 4000; // how deep into the menu item the mouse needs to travel before traversal/selection takes place

@author Christian Lagerkvist [@lgrkvst, git@o-o.se]
 Add icon support
 Fix leaf text styles (curved text demands some restrictions... There is a radiating text style in the source code, although somewhat neglected lately)
 Move svg attributes to css
 Add tests

Rate & Review

Great Documentation0
Easy to Use0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Unwelcoming Community0