[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`
维护者通常 1 天内回复
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 78/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- d3, typescript
调研方向
从 packages/charts-core/src/svg-renderer.ts 中的 focusGuideRenderHooks 和 paint() 调用开始，然后追踪 resolvePaint 如何经由 svg.ts 和 svg-surface.ts 传递。根据 issue 中的复现步骤添加回归测试，并用 pnpm vitest run 运行；当 focus-guide 的 paint 使用 url(#id) 时，能够解析到受 idPrefix 作用域限定的资源 ID，即表示完成。
由索引模型根据 Issue 内容生成。
描述
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
renderChartSvgmapsurl(#id)tourl(#<idPrefix>-id)throughresolvePaint(svg.ts:18-26).focusGuideRenderHookshas onlyrenderGroup(svg-renderer.ts:84-86), sopaint()writes the value verbatim (svg-renderer.ts:207-209).
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).
- 主要语言
- TypeScript
- 星标
- 819
- 派生
- 49
- 平均合并
- 12 小时 9 分钟
- 30 天内合并 PR
- 6
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/charts 的其他 Issue
-
难度 1/5 1 小时以内 新手友好度 85/100
维护者通常 1 天内回复
-
brushX with `values` can shorten the selection range when it’s dragged to the plot edge可能已有人在做 @andersk 于 7 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 42/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 57/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 35/100
维护者通常 1 天内回复
相似的 Issue
-
Contrib indemnité de départ à la retraite : faire le pont avec le simulateur sur la page générique未关闭P1
难度 2/5 1-3 小时 新手友好度 62/100
SocialGouv/code-du-travail-numerique#7561 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
kubernetes-sigs/headlamp#7950 ·
维护者通常 3 天内回复
-
README for cli可能已有人在做 @Janvi-kapoor 今天认领。 未关闭OSCI'26
难度 2/5 1-3 小时 新手友好度 70/100
GauravKarakoti/SecureFlow#1308 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 74/100
维护者通常 1 天内回复
-
documentation
难度 2/5 1-3 小时 新手友好度 62/100
vitest-dev/vitest#11577 ·
维护者通常 1 天内回复