[Feature] `text` mark: numeric tween with a `format` function
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 57/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- d3, typescript
调研方向
Read packages/charts-core/src/text.ts around lines 112–114 and packages/charts-core/src/motion.ts around lines 2113–2116, then run the provided Vitest repro. Trace how text marks are rendered and how the reconciler handles text leaves; define completion by intermediate formatted values appearing during the tween, the final text matching the target exactly, and reduced motion retaining the snap behavior.
由索引模型根据 Issue 内容生成。
描述
Version: @tanstack/charts 1.1.0 (57774e1). Split from #193 (section B) so it can be closed on its own.
A text mark showing a number (a total in a donut centre, a value label) jumps to the new string while the marks around it animate.
Why
textconverts the datum withString(datum)(text.ts:112-114); there is no numeric or format option.- The reconciler writes leaf text immediately (
motion.ts:2113-2116).
Repro
Save as packages/charts-core/src/repro.test.ts, run pnpm vitest run packages/charts-core/src/repro.test.ts (vitest + jsdom, rAF driven by hand).
import { expect, it, vi } from 'vitest'
import { scaleLinear } from 'd3-scale'
import { defineChart, text } from './index'
import { motion } from './motion'
import { createChartScene } from './scene'
it('numeric text content tweens', () => {
const queue: FrameRequestCallback[] = []
const tick = (t: number) => queue.splice(0).forEach((f) => f(t))
vi.spyOn(window, 'requestAnimationFrame').mockImplementation((f) => queue.push(f))
vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
const el = document.createElement('div')
const s = motion({ transition: { type: 'tween', duration: 1000, easing: 'linear' } }).mount(el, () => {})
const scales = { x: { scale: scaleLinear }, y: { scale: scaleLinear } }
const render = (v: number) => s.render(createChartScene(defineChart({ scales, guides: false,
marks: [text([v], { x: () => 0.5, y: () => 0.5, text: (d) => d.toFixed(0) })] }), { width: 300, height: 200 }), { ariaLabel: 'x' })
render(10); tick(0); tick(2000)
render(90); tick(0)
const seen = new Set<string>()
for (const t of [250, 500, 750]) { tick(t); seen.add(el.querySelector('text')!.textContent!) }
expect([...seen].length).toBeGreaterThan(1)
})
Output on 57774e1: distinct textContent values at 250/500/750 ms = [ '90' ] (expected more than 1).
Ask
An opt-in numeric text tween that writes the formatted string each frame and ends on the exact target; reduced motion keeps the snap. For example a format?: (value: number) => string option on text plus a motion opt-in.
Related: #193.
- 主要语言
- TypeScript
- 星标
- 850
- 派生
- 56
- 平均合并
- 3 小时 59 分钟
- 30 天内合并 PR
- 19
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/charts 的其他 Issue
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`可能已有人在做 @getdownandcode 于 16 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
React custom tooltip body shows the previous point for a frame after a pointer move可能已有人在做 @piotrkulpinski 于 8 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 35/100
维护者通常 1 天内回复
-
[Bug] Printed charts keep their screen width: resize redraw waits for an animation frame可能已有人在做 @piecyk 于 15 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 25/100
维护者通常 1 天内回复
-
[Feature] Readable outside labels for crowded pie and donut charts可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 5/5 一周以上 新手友好度 25/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 42/100
维护者通常 1 天内回复
相似的 Issue
-
Shell: serve the home app's Cookie Policy on a hard reload可能已有人在做 @2001anshkaushik 今天认领。 未关闭feature module:ai
难度 2/5 1-3 小时 新手友好度 88/100
rocketride-org/rocketride-server#2899 · 1 条评论 ·
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
wazuh/wazuh-dashboard-plugins#9551 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
gofish-graphics/gofish-graphics#1252 ·
维护者通常 1 天内回复
-
optimization P3 size:XS
难度 1/5 1-3 小时 新手友好度 88/100
josephfung/curia#2366 ·
维护者通常 1 天内回复
-
type:bug
难度 2/5 1-3 小时 新手友好度 65/100
nightgauge/nightgauge#2688 ·
维护者通常 1 天内回复