@xuanwu/graph

基于 D3 v7 的 React 关联图谱组件，适用于事件-人-地-物等节点关系可视化场景。

核心能力：

• 力导向布局 (d3-force) + 自定义矩形 forceCollide，节点外接矩形不重叠
• 8 方向标签贪心避让 + 超阈值自动绘制引导线，保证标签也尽量不遮挡
• 中心节点锚定 + forceRadial 软分层，可贴近"中心-多环"视觉
• SVG 渲染，支持 zoom / pan / 节点拖拽 + 钉住 / 双击解除
• 主题可替换：内置 default / platformMain / screenCommand 三套，业务可透传自定义

安装

本地开发（推荐）在工作区中使用 file: 引用：

// 消费端 package.json
{
  "dependencies": {
    "@xuanwu/graph": "file:../graph-component"
  }
}

使用

import { RelationGraph } from "@xuanwu/graph";
import { platformMainTheme } from "@xuanwu/graph/themes/platform-main";

<RelationGraph
  nodes={[
    { id: "c", label: "中心事件", type: "event", isCenter: true },
    { id: "v1", label: "小轿车", type: "vehicle", depth: 2 },
  ]}
  edges={[{ id: "e1", source: "c", target: "v1", label: "关联" }]}
  theme={platformMainTheme}
  force={{ radialStrength: 0.3, radialStep: 120 }}
  draggable
  onNodeClick={(n) => console.log(n)}
/>;

迁移指引（已完成）

platform-main

• src/utils/chat/KnowledgeGraph.tsx 改为 <RelationGraph/> 的轻封装。
  • 保留原 API：{ title, nodes, edges, layoutScale }；ChatProvider 不变。
  • 依然使用原 PNG 资源（src/utils/chat/assets/kg-*.png），通过 createPlatformMainTheme(assets) 注入主题。
  • 中心识别沿用"isCenter > type==='event' > nodes[0]"；depth 映射：event→1、vehicle/person/material→2、video→3。
  • 小图 416x416 + 点击全屏 Portal 放大，Esc 关闭。
• package.json 新增依赖："@xuanwu/graph": "file:../graph-component"。

screen-command

• 两份 EventRelationship 合并为单一实现：
  • src/components/Event/components/EventRelationship/index.tsx —— 新实现
  • src/components/Event/eventWorkbench/EventDetail/Relationship/index.tsx —— re-export 壳
  • 原 g6Node.ts 已删除。
• RadarNodeType 由数值 enum 改为字符串 enum（字面量仍保留业务 typo orgnization），配合 radarTreeToGraph 转为 {nodes, edges}。
• 主题：createScreenCommandTheme(assets)，沿用原 SVG 资源（icon-g6-node-bg.svg、icon-event.svg 等）。
• defaultCollapsedDepth=2，近似原 collapse-expand 行为，通过双击节点展开/折叠。
• @antv/g6 仍在 DispatchGraph（派单流程图）使用，非关联图谱范围，保留依赖。如后续改造 DispatchGraph，可一并移除。

核心算法

见 PLAN 中 4.x 节。关键文件：

• src/layouts/force.ts：力组合
• src/anti-occlusion/rect-collide.ts：自定义矩形碰撞
• src/anti-occlusion/label-placement.ts：8 方向贪心 + 引导线

开发

pnpm install
pnpm dev        # 运行 example 调试
pnpm build      # 产出 dist