[Feature] `text` mark: numeric tween with a `format` function
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 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
- スター
- 819
- フォーク
- 49
- 平均マージ
- 12時間 9分
- マージ済み PR（30日）
- 6
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
TanStack/charts のほかの issue
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
Renderer treats a sub-pixel width difference as a resize, which cancels the `motion()` entranceオープン
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
TanStack/charts#182 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
brushX with `values` can shorten the selection range when it’s dragged to the plot edge対応中かも @andersk が 6 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 5/5 1週間以上 初心者へのやさしさ 42/100
メンテナーはふだん 1 日以内に返信
-
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
メンテナーはふだん 1 日以内に返信
TanStack/charts の issue をすべて見る
似ている issue
-
ai-driven-qa bug claude Minor
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
linagora/twake-contacts-frontend#241 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
メンテナーはふだん 1 日以内に返信
-
ui(ListToolbar): search takes the full row on a phone instead of sharing it with the result countオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
メンテナーはふだん 1 日以内に返信
-
priority:high
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
ahmedkhaleel2004/gitdiagram#228 ·