Camembert et anneau ​

D3PPieRenderer dessine une série de paires [nom, taille] en parts : pas d'axes, un seul rendu. Il dessine dans un système de coordonnées polaire et en reprend le centre, le rayon, l'angle de départ, le sens et le trou : les réglages du système façonnent donc les camemberts comme les graphiques polaires. Un anneau est un camembert dans un système dont innerRadius est supérieur à 0.

Survolez une part pour la déplacer et voir sa part du total dans l'infobulle ; cliquez sur une entrée de la légende pour masquer une part, et les autres remplissent le cercle.

ts
import {
  d3pAutoInteractionArea, D3PChart, d3pDomLegend, d3pDomTooltip, D3PLegendBundle, D3PPieRenderer,
  D3PPolarSystem, D3PSeries, D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const share = new D3PSeries({
  bus,
  name: 'browsers',
  data: [['Chrome', 62], ['Safari', 20], ['Edge', 5.5], ['Firefox', 3.2], ['Samsung', 2.6], ['Opera', 2.1], ['Other', 4.6]],
})
const system = new D3PPolarSystem({ bus, props: { padding: 20 } })
const pie = new D3PPieRenderer({ bus, series: share, props: { padAngle: 1, cornerRadius: 3, sort: 'descending' } })
const tooltip = new D3PTooltip({ bus })
const legend = new D3PLegendBundle({ bus })
// the system comes first: the pie draws in it
const objects = [system, pie, tooltip, legend]

const chart = new D3PChart({ container, bus })
const stopArea = d3pAutoInteractionArea(chart) // before the objects: the tools, the cursor and the tooltip ask for an interaction area
objects.forEach((o) => o.addToChart(chart))
const stopTooltip = d3pDomTooltip(tooltip)
const stopLegend = d3pDomLegend(legend)

// a pie is a donut with no hole
const shape = Object.assign(document.createElement('div'), { className: 'toolbar' })
for (const [name, innerRadius] of [['pie', 0], ['donut', 0.55]] as const) {
  const button = Object.assign(document.createElement('button'), { textContent: name, onclick: () => system.props({ innerRadius }) })
  shape.append(button)
}
container.before(shape)

Ce qu'il fait ​

  • Parts. Une par point de taille positive, dans l'ordre des données (ou triées avec sort: 'ascending' | 'descending'). Les valeurs qui ne sont pas des nombres positifs n'ont pas de part. padAngle (degrés) et cornerRadius (pixels) les façonnent ; style.colors remplace la palette par défaut.
  • Légende. Sa légende a une entrée par part, et non une pour le rendu : chaque rendu liste ses propres entrées (legendEntries()), et le toggle() d'une entrée montre ou masque ce qu'elle représente. Les légendes personnalisées utilisent entry.label, entry.color, entry.visible et entry.toggle().
  • Infobulle. Sans axes, il n'y a pas de valeur à lire sous le pointeur : le rendu répond en testant le pointeur contre ses parts (son probeHit). La ligne montre le nom, la taille et la part (label, percent), et la boîte suit le pointeur. Vos propres rendus peuvent faire de même.
  • Survol. La part sous le pointeur s'écarte de explode pixels. C'est le marker par défaut du camembert (marker: false le retire, hover: false désactive l'effet ; le rendu ne demande alors pas de zone d'interaction).
  • Étiquettes. La part de chaque tranche, au-delà de labels.minPercent ; labels.format remplace le texte.
  • Camemberts imbriqués. radius: [de, à] (fractions de l'anneau du système) donne à chacun sa bande : deux camemberts sur un graphique forment des anneaux concentriques.
  • À côté d'axes polaires. Un camembert peut partager le système, et le graphique, de séries polaires : le rendu ignore les axes.

Un camembert exige un système polaire : avec un système cartésien, il lève une erreur explicite à l'attachement.