Barres horizontales ​

orientation: 'horizontal' : les valeurs courent le long de l'axe du bas, les catégories le long de celui de gauche (un axe en bandes).

ts
import {
  d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PBarRenderer, D3PChart, d3pDomTooltip, D3PSeries,
  D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

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

const data: [string, number][] = [['Python', 82], ['TypeScript', 74], ['Rust', 51], ['Go', 47], ['Kotlin', 33], ['Zig', 12]]
const popularity = new D3PSeries({ bus, name: 'popularity', data })

// the values run along the bottom axis, the categories along the left one (a band axis)
const dv = new D3PAxisDomain({ bus, domain: [0, 100] })
const dc = new D3PAxisDomain({ bus, domain: data.map((d) => d[0]).reverse() })
const value = new D3PAxis({ bus, name: 'value', domain: dv, props: { grid: { enabled: true } } })
const language = new D3PAxis({ bus, name: 'language', domain: dc, position: 'left', scaleType: 'band' })
const bars = new D3PBarRenderer({ bus, series: popularity, props: { orientation: 'horizontal', style: { color: '#4e79a7' } } })

const tooltip = new D3PTooltip({ bus })
const objects = [value, language, bars, tooltip]
const margin = { left: 90 }

const chart = new D3PChart({ container, bus, margin })
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)

Tous les types de graphiques · comment chaque type est construit