ICEN UI v0.9.0

嵌入地图

renderMap：embedding 2D 投影地图（renderScatter 的去轴变体）——坐标为预投影值（UMAP / t-SNE 产物，本组件只做视口 min-max 缩放不算投影），无轴刻度只留细虚线网格；点 4px 半透明（fill-opacity 0.7，高密度层叠可辨），簇着色走既有调色盘 + 可点击图例隐藏整簇；点选走 icen:chart-click，detail.datum = { id, label, cluster?, meta? } 回 chunk 数据（meta 原样回传）。

悬停看簇名 · 点击点回 chunk 数据 · 点图例隐藏整簇 · 坐标为预投影值（UMAP / t-SNE 产物，组件不做投影）

<div class="chart" id="chart-map-demo"></div><p class="demo-label" id="chart-map-log" style="margin-top:8px">悬停看簇名 · 点击点回 chunk 数据 · 点图例隐藏整簇 · 坐标为预投影值（UMAP / t-SNE 产物，组件不做投影）</p>

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import '@icen.ai/ui/kit/chart-map';

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add chart-map

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/charts.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { renderMap } from '@icen.ai/ui/kit/chart-map'; const h = renderMap(el, {  type: 'map',  points: [    // x/y 为预投影 2D 坐标（UMAP / t-SNE 产物）；组件只做视口 min-max 缩放    { id: 'chunk-91', x: 0.31, y: 0.62, cluster: 'policy', label: '差旅报销办法 #3',      meta: { doc: '差旅报销管理办法.md' } },  ],  clusters: { policy: '制度文档', faq: 'FAQ 问答' },   // 簇 key → 图例名});h.on('click', (d) => openChunkPanel(d.datum));   // datum.meta 原样回传（点选回 chunk）h.update(nextSpec);                              // 原地重渲（保留事件委托与句柄）