Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[Feature] `text` mark: numeric tween with a `format` function

Đang mở
  • Có gì không ổn?
#215 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
57/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
d3, typescript
Lĩnh vực
data-visualization, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
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.

Ngôn ngữ chính
TypeScript
Star
842
Fork
53
Merge trung bình
4 giờ 40 phút
Pull request đã merge (30 ngày)
16

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/charts

Tất cả issue của TanStack/charts

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.