Étape 5 : zoom et déplacement ​

Les outils laissent l'utilisateur agir sur le graphique. Ils font une seule chose : écrire les domaines des axes.

ts
import {
  D3PAutoDomain, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PChart, D3PCursorIndicator, d3pDomLegend,
  d3pDomTooltip, D3PLegendBundle, D3PLineRenderer, D3PSeries, D3PTooltip, getGlobalBus,
  d3pDomTooltip, D3PLegendBundle, D3PLineRenderer, D3PPanTool, D3PResetTool, D3PSeries, D3PToolbox,
  D3PTooltip, D3PWheelZoomTool, 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 feelsLike = new D3PSeries({ bus, name: 'feels like', data: [[0, 10], [4, 6], [8, 12], [12, 22], [16, 25], [20, 15], [24, 11]] })

const hours = new D3PAxisDomain({ bus, domain: [0, 24] })
const degrees = new D3PAxisDomain({ bus, domain: [0, 30] })
const auto = new D3PAutoDomain({ bus })
auto.linkSeries(temperature, [hours, degrees])
auto.linkSeries(feelsLike, [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 } } })
// one renderer per series; its style is a prop
const line = new D3PLineRenderer({ bus, series: temperature, props: { style: { color: '#e15759', curve: 'monotone', strokeWidth: 2.5 } } })
const feelsLine = new D3PLineRenderer({ bus, series: feelsLike, props: { style: { color: '#4e79a7', curve: 'monotone' } } })

// what the pointer shows: a crosshair, a tooltip, a legend
const cursor = new D3PCursorIndicator({ bus })
const tooltip = new D3PTooltip({ bus })
const legend = new D3PLegendBundle({ bus })

const objects = [x, y, line, feelsLine, cursor, tooltip, legend]
// tools act on the domains: drag to pan, wheel to zoom
const tools = new D3PToolbox({ bus })
tools.addTool(new D3PPanTool({ bus }))
tools.addTool(new D3PWheelZoomTool({ bus }))
tools.addTool(new D3PResetTool({ bus }))
for (const name of ['pan', 'wheel-zoom', 'reset']) tools.setToolActive(name)

const objects = [x, y, line, feelsLine, cursor, tooltip, legend, tools]

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

Ce qui a changé :

  • D3PToolbox porte les outils et dit lesquels sont actifs. setToolActive('pan') active un outil.
  • D3PPanTool déplace les domaines quand le pointeur fait glisser le tracé. D3PWheelZoomTool zoome autour du pointeur avec la molette. D3PResetTool ramène les domaines là où ils étaient.

Les axes suivent les domaines, et tout ce qui en dépend aussi : les courbes, la grille, le curseur.

Les outils ​

OutilNomFait
D3PPanToolpanglisser pour déplacer
D3PZoomSelectionToolzoom-selectiontracer un rectangle pour zoomer dessus
D3PClickZoomToolzoom-clickcliquer pour zoomer
D3PWheelZoomToolwheel-zoommolette pour zoomer autour du pointeur
D3PWheelPanToolwheel-panmolette pour se déplacer en x
D3PResetToolresetretour à la première vue

Choisir ce sur quoi un outil agit ​

Par défaut, un outil agit sur tous les axes du graphique. L'option axes nomme ceux qu'il déplace :

ts
new D3PPanTool({ bus, axes: ['hour'] }) // déplace x, laisse la plage y tranquille

new D3PToolbox({ bus, mutuallyExclusiveGroups: [['pan', 'zoom-selection']] }) rend des outils exclusifs : en activer un désactive les autres de son groupe.

La molette et la page ​

Un graphique qui a un outil de molette prend la molette tant que le pointeur est dessus. Un graphique sans outil laisse la page défiler.