ICEN UI v0.9.0

知识图谱

renderGraph：GraphRAG 实体关系力导向 node-link——确定性布局（id 升序环初始化 + 300 轮松弛，无随机源，同数据同布局）、簇着色走既有调色盘（图例可点隐藏整簇，边随任一端簇隐藏淡化）、weight 映射节点半径 6–18px（缺省用度中心性）与边宽 0.6–2.5px、节点可拖拽（局部松弛 20 轮 / rAF 批处理）；事件走既有 icen:chart-* 通道，detail.datum = { id, label, cluster?, meta? } 点击节点回实体卡数据；directed: true 时边带箭头。layoutGraph 为可单测纯函数。

悬停看实体 · 点击节点回实体卡数据（detail.datum.meta）· 拖拽节点局部松弛 · 点图例隐藏整簇（边随端点淡化）

<div class="chart" id="chart-graph-demo"></div><p class="demo-label" id="chart-graph-log" style="margin-top:8px">悬停看实体 · 点击节点回实体卡数据（detail.datum.meta）· 拖拽节点局部松弛 · 点图例隐藏整簇（边随端点淡化）</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderGraph, layoutGraph } from '@icen.ai/ui/kit/chart-graph'; const h = renderGraph(el, {  type: 'graph',  nodes: [    { id: 'co-1', label: '冰岩科技', cluster: 'company', weight: 9, meta: { desc: '集团母公司' } },    { id: 'pr-1', label: 'ICEN UI', cluster: 'product' },   // weight 缺省用度中心性定尺寸  ],  edges: [{ source: 'co-1', target: 'pr-1', weight: 9 }],   // weight → 线宽 0.6–2.5px  clusterLabels: { company: '公司', product: '产品', person: '人物' },  // directed: true 时边带箭头});h.on('click', (d) => openEntityCard(d.datum));   // { id, label, cluster?, meta? }（meta 原样回传）h.update(nextSpec);                              // 原地重渲（重新布局；确定性：同数据同布局）layoutGraph(nodes, edges, { seed: 8 });          // 纯函数：id → { x, y }（可单测）