Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`

Aperta Adatta ai principianti
  • Qualcosa non va?
#211 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@getdownandcode ci sta già lavorando.

Dal 13/10/2026.

  • #217 di @getdownandcode — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
d3, typescript
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia in packages/charts-core/src/svg-renderer.ts, da focusGuideRenderHooks e dalla chiamata paint(). Poi segui come resolvePaint viene passato attraverso svg.ts e svg-surface.ts. Aggiungi un test di regressione basato sulla riproduzione nell’issue ed eseguilo con pnpm vitest run; il lavoro è completo quando i paint di focus-guide che usano url(#id) vengono risolti nell’id della risorsa con scope idPrefix.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Version: @tanstack/charts 1.1.0 (57774e1). Split from #191 (section C) so it can be closed on its own.

With idPrefix set, mark paints such as fill: 'url(#fade)' resolve to the scoped resource id, but the same paint on a focus guide or crosshair is written verbatim and points at a resource that does not exist. This affects gradients today and <pattern> resources once PR #166 lands.

Why
Repro

Save as packages/charts-core/src/repro.test.ts, run pnpm vitest run packages/charts-core/src/repro.test.ts.

import { expect, it } from 'vitest'
import { scaleLinear } from 'd3-scale'
import { areaY } from './area'
import { crosshair } from './crosshair'
import { motion } from './motion'
import { createChartScene, defineChart } from './scene'

const make = (end: number, top: number) =>
  createChartScene(defineChart({
    marks: [
      areaY([{ x: 0, y: 1 }, { x: 1, y: top }, { x: 2, y: 2 }], { x: 'x', y: 'y', fill: 'url(#fade)' }),
      crosshair({ y: false, stroke: 'url(#fade)' }),
    ],
    scales: { x: { scale: scaleLinear().domain([0, 2]) }, y: { scale: scaleLinear().domain([0, 4]) } },
    gradients: [{ id: 'fade', stops: [
      { offset: 0, color: '#2563eb', opacity: 0.6 }, { offset: end, color: '#2563eb', opacity: 0 }] }],
  }), { width: 320, height: 200 })
const opts = { ariaLabel: 't', idPrefix: 'a' }

it('url(#id) in a focus-guide node is scoped by idPrefix', () => {
  const el = document.createElement('div')
  const surface = motion({ initial: false }).mount(el, () => {})
  const scene = make(1, 3)
  surface.render(scene, opts)
  const p = scene.points[0]!
  surface.paintFocus({ primary: p, group: [p], source: 'pointer', pinned: false })
  const rule = el.querySelector('[data-ts-focus-guide-layer] [data-ts-key$=":x-rule"]')!
  console.log('gradient id:', el.querySelector('linearGradient')?.id, '| guide stroke:', rule.getAttribute('stroke'))
  expect(rule.getAttribute('stroke')).toBe('url(#a-fade)')
})

Actual output:

gradient id: a-fade | guide stroke: url(#fade)
AssertionError: expected 'url(#fade)' to be 'url(#a-fade)'
Expected

Guide node paints resolve to the scoped id like mark paints. Proposal: pass resolvePaint into focusGuideRenderHooks and the renderer-based path (svg-surface.ts:326-327).

Related: #191 (gradient stops and units), #128 / PR #166 (<pattern> resources).

Lingua principale
TypeScript
Stelle
819
Fork
49
Merge medio
4h 58m
PR unite (30g)
15

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/charts

Tutte le issue di TanStack/charts

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.