Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Bug] Bars: scalar `radius` gives elliptical SVG corners on narrow bars, and no option widens a single-datum bar past 48px

オープン
  • 何か問題がありますか？
#197 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
58/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
d3, typescript
領域
data-visualization

調査の方向性

Start with the repro file packages/charts-core/test-repro/12-bar-rect-geometry.test.ts, run with pnpm vitest run on it. For A, look at the width fallback around bar.ts:872-873 and mirror the bandX.width option; the option name is still open. For B, the rx emission is at svg-renderer.ts:126, so also emit ry and clamp both radii per axis as canvas.ts:1424 does. Done when both tests pass and the radius docs in bar-and-rect.md still match.

索引モデルが issue の本文から書いたものです。

説明

Version: @tanstack/charts 1.1.0 (57774e1).

B is a bug (SVG and Canvas disagree, and the docs say a number rounds every corner). A is a small option in the same bar geometry code; the 48px cap itself is documented (bar-and-rect.md:105).

B. Scalar radius is elliptical on narrow bars in SVG
  • A scalar radius reaches the scene as { radius } with no bar size: rect-radius-state-internal.ts:27-31.
  • SVG emits rx only: svg-renderer.ts:126. Per SVG 2, ry defaults to rx and each is clamped on its own axis, so a bar narrower than 2 * radius gets elliptical corners (not run: jsdom does no layout).
  • Canvas clamps one circular radius to min(radius, width / 2, height / 2): canvas.ts:1424.
  • The docs say a number rounds every corner (bar-and-rect.md:124).

Expected: SVG emits ry too and clamps both like Canvas.

A. Single-datum bars are capped at 48px

Expected: a width (barY) / height (barX) option applied in the fallback, mirroring bandX.width.

Repro

Save as packages/charts-core/src/repro.test.ts, run pnpm vitest run packages/charts-core/src/repro.test.ts from the repo root. Both tests assert the expected behavior and fail on main.

import { scaleBand, scaleLinear } from 'd3-scale'
import { expect, it } from 'vitest'
import { barY } from './bar'
import { createChartScene, defineChart } from './scene'
import { renderChartSvg } from './svg'

const rects = (nodes: any[]): any[] =>
  nodes.flatMap((n) => (n.kind === 'rect' ? [n] : rects(n.children ?? [])))
const y = { scale: scaleLinear().domain([0, 100]) }

it('A: a single bar on a linear x scale can be wider than 48px', () => {
  const scene = createChartScene(
    defineChart({
      marks: [barY([{ k: 1, v: 90 }], { x: 'k', y: 'v' })],
      scales: { x: { scale: scaleLinear().domain([0, 2]) }, y },
    }),
    { width: 600, height: 240 },
  )
  expect(rects(scene.nodes)[0].width).toBeGreaterThan(48)
})

it('B: scalar radius on a narrow bar is circular in SVG', () => {
  const scene = createChartScene(
    defineChart({
      marks: [barY([{ k: 'a', v: 90 }], { x: 'k', y: 'v', radius: 8 })],
      scales: { x: { scale: scaleBand<string>().domain(['a', 'b']).padding(0.8) }, y },
    }),
    { width: 120, height: 240 },
  )
  expect(renderChartSvg(scene, { ariaLabel: 'bars' }).match(/<rect[^>]*\brx=[^>]*>/)![0]).toMatch(/\bry="/)
})

Output (both fail):

A: AssertionError: expected 48 to be greater than 48
B: AssertionError: expected '<rect data-ts-key="bar-y-0:object:nul…' to match /\bry="/

Downstream measurement (bklit migration, Chrome): a tuple [r, r, r, r] gives circular corners; a scalar differs only when the bar is narrower or shorter than 2 * radius.

主要言語
TypeScript
スター
819
フォーク
49
平均マージ
4時間 40分
マージ済み PR（30日）
16

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/charts のほかの issue

TanStack/charts の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。