The SVG element containing the D3 sunburst.
Configuration specifying the selector and data accessors.
A D3BinderResult with the MAIDR data and generated layer.
const root = d3.partition().size([2 * Math.PI, radius])(
d3.hierarchy(data).sum(d => d.population),
);
svg.selectAll('path.arc').data(root.descendants().slice(1)).join('path')…;
bindD3Sunburst(svgElement, {
selector: 'path.arc',
title: 'World population by region',
axes: { x: 'Region', y: 'Population, millions' },
});
Binds a D3.js sunburst to MAIDR.
A sunburst is the same tree as a treemap drawn in polar coordinates, so the extraction is that of bindD3Treemap:
selectormatches the arc<path>elements ad3.partition()produced. The trace pans each node by its angle around the dial, which is what distinguishes a ring from a row of rectangles by ear.What differs in practice is which nodes are drawn: a partition lays out interior nodes as well as leaves, and
root.descendants()includes the root itself. Whatever you joined is what the binder emits, so select exactly the arcs you drew.