layerchart-svelte5

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

LayerChart Svelte 5

Docs: next.layerchart.com (NOT layerchart.com - that's Svelte 4)

文档：next.layerchart.com（不是 layerchart.com - 那是 Svelte 4 版本的）

Install

安装

bash

npm i layerchart@next d3-scale

CRITICAL: Use

@next

tag. Stable (1.x) is Svelte 4 only.

bash

npm i layerchart@next d3-scale

重要提示：使用

@next

标签。稳定版（1.x）仅支持 Svelte 4。

Quick Start

快速开始

svelte

<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
	<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
	<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
</Chart>

svelte

<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
	<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
	<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
</Chart>

Core Patterns

核心模式

Tooltip:
```
{#snippet children({ data })}
```
- NOT
```
let:data
```
Chart context:
```
{#snippet children({ context })}
```
Gradient:
```
{#snippet children({ gradient })}
```
Enable tooltip:
```
tooltip={{ mode: 'band' | 'bisect-x' }}
```

Type data:

{#snippet children({ data }: { data: MyType })}

提示框：
```
{#snippet children({ data })}
```
- 不要使用
```
let:data
```
图表上下文：
```
{#snippet children({ context })}
```
渐变：
```
{#snippet children({ gradient })}
```
启用提示框：
```
tooltip={{ mode: 'band' | 'bisect-x' }}
```

类型化数据：

{#snippet children({ data }: { data: MyType })}

Tooltip Modes

提示框模式

Mode	Use Case
`band`	Bar charts (scaleBand)
`bisect-x`	Time-series area/line
`quadtree-x`	Area (nearest x)
`quadtree`	Scatter plots

模式	适用场景
`band`	柱状图（scaleBand 比例尺）
`bisect-x`	时间序列面积图/折线图
`quadtree-x`	面积图（最近X轴点）
`quadtree`	散点图

References

参考资料

full-patterns.md - Area, Bar, Pie, Calendar
tooltip-modes.md - All modes
graph-patterns.md - ForceGraph, zoom/pan

full-patterns.md - 面积图、柱状图、饼图、日历图
tooltip-modes.md - 所有模式
graph-patterns.md - 力导向图、缩放/平移