Étape 2 : axes et domaines

Un axe transforme les valeurs de vos données en positions. Deux choses y participent : son domaine (domain), la plage de valeurs qu'il montre, et son échelle (scale), la fonction qui projette cette plage sur des pixels. Vous écrivez le domaine ; l'axe construit l'échelle à partir de lui et de la taille du graphique.

import { D3PAxis, D3PAxisDomain, D3PChart, D3PLineRenderer, D3PSeries, getGlobalBus } from 'd3pict'
import {
  D3PAutoDomain, D3PAxis, D3PAxisDomain, D3PChart, D3PLineRenderer, D3PSeries, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

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

const temperature = new D3PSeries({ bus, name: 'temperature', data: [[0, 12], [4, 9], [8, 14], [12, 21], [16, 24], [20, 17], [24, 13]] })

const x = new D3PAxis({ bus, name: 'hour', domain: new D3PAxisDomain({ bus, domain: [0, 24] }) })
const y = new D3PAxis({ bus, name: 'temperature', domain: new D3PAxisDomain({ bus, domain: [0, 30] }), position: 'left' })
// the domain of an axis is the range of values it shows
const hours = new D3PAxisDomain({ bus, domain: [0, 24] })
const degrees = new D3PAxisDomain({ bus, domain: [0, 30] })
// an auto domain fits the domains to the data of the series it is linked to
const auto = new D3PAutoDomain({ bus })
auto.linkSeries(temperature, [hours, degrees])

const x = new D3PAxis({ bus, name: 'hour', domain: hours, props: { tickCount: 6, tickFormat: (v) => `${Math.round(v)} h`, grid: { enabled: true } } })
const y = new D3PAxis({ bus, name: 'temperature', domain: degrees, position: 'left', props: { tickFormat: (v) => `${Math.round(v * 10) / 10} °C`, grid: { enabled: true } } })
const line = new D3PLineRenderer({ bus, series: temperature })

const objects = [x, y, line]

const chart = new D3PChart({ container, bus })
objects.forEach((o) => o.addToChart(chart))

Ce qui a changé :

• Les domaines sont des variables. hours et degrees sont des objets D3PAxisDomain, donnés aux axes. Un domaine est un objet simple qui porte une plage, rien d'autre : ni échelle, ni pixels.
• Un domaine automatique les ajuste aux données. D3PAutoDomain.linkSeries(series, [domaineX, domaineY]) règle les domaines sur l'étendue de la série, et les tient à jour quand les données changent. Retirez-le pour garder les plages que vous avez écrites.
• Les axes se règlent avec props. tickCount est le nombre de graduations voulu, tickFormat écrit une valeur, grid dessine la grille, displayName est le nom affiché dans les étiquettes du curseur et les titres.

Les domaines sont partagés et modifiables

Le domaine d'un axe se lit et s'écrit : hours.domain = [6, 18] ne montre que la journée, et l'axe suit. C'est tout ce que font le zoom et le déplacement (ils écrivent des domaines), et c'est ainsi que des graphiques restent synchrones : deux axes construits sur le même D3PAxisDomain montrent toujours la même plage, même sur deux graphiques différents.

Types d'échelle

scaleType sur l'axe choisit l'échelle.

scaleType	Pour	Domaine
linear (défaut)	des nombres	[min, max]
time, utc	des dates	[début, fin] en Date
log	des nombres sur plusieurs ordres de grandeur	[min, max], tous deux au-dessus de 0
symlog	pareil, avec des valeurs négatives et zéro	[min, max]
pow, sqrt	des aires et autres lois de puissance	[min, max]
band	des catégories dessinées en bandes (barres)	la liste des catégories
point	des catégories dessinées en points (une courbe sur des catégories)	la liste des catégories

scaleOptions passe des options à l'échelle : la base d'une échelle log, l'exponent d'une échelle pow.