用途:该技能面向使用 LayerChart 构建 Svelte 5 图表组件的场景,重点覆盖 tooltip snippet、Chart context 访问,以及 tooltip、渐变等 Svelte 5 snippet 写法。
文档与安装:文档地址为 next.layerchart.com,注意 layerchart.com 对应 Svelte 4。安装命令:npm i layerchart@next d3-scale。关键点是必须使用 @next 标签,稳定版 1.x 仅支持 Svelte 4。
主要能力与用法:在 Chart 组件上通过 tooltip={{ mode: 'bisect-x' }} 等启用提示;使用 {#snippet children({ data })} 而非 let:data 定义 tooltip 内容;通过 {#snippet children({ context })} 访问 Chart context;通过 {#snippet children({ gradient })} 使用渐变;可用 {#snippet children({ data }: { data: MyType })} 为数据标注类型。
Tooltip 模式:band 适用于柱状图(scaleBand);bisect-x 适用于时间序列面积图/折线图;quadtree-x 适用于面积图(最近 x);quadtree 适用于散点图。
参考资料:full-patterns.md 涵盖 Area、Bar、Pie、Calendar;tooltip-modes.md 列出全部模式;graph-patterns.md 涉及 ForceGraph 与缩放/平移。
限制:资料未提供更多收费、平台或效果信息,暂未提供。