用途
该技能用于在 Angular UI 中使用 D3（SVG/Canvas）实现交互式可视化。当你需要选择图表类型并将其映射到对应的 D3 布局或模块时，可以借助本技能获得指导。
主要能力
技能提供了一套工作流程：
- 明确目的：比较、排名、部分与整体、流程、层级、网络、地理、时间安排。
- 选择能回答该问题的最简表示形式（避免新奇图表）。
- 在应用边界定义图表视图模型（VM）；UI 以 Signals 形式接收。
- 选择渲染技术：中小规模用 SVG 以兼顾可读性与无障碍；大规模用 Canvas 或混合方案以提升密度与性能。
- 仅在能降低认知负荷时添加交互（缩放、平移、悬停、选择、过滤）。
- 构建无障碍支持：文本摘要、键盘导航、减少动效。
图表到 D3 的映射（快速指南）
- 森林图 Forest Plot：scales/axes（d3-scale、d3-axis）+ 点/置信区间线（d3-shape）
- 径向树 Radial Tree：d3-hierarchy.tree()/cluster() + 径向链接（d3-shape）
- 旭日图 Sunburst：d3-hierarchy.partition()
- 桑基图 Sankey：d3-sankey
- 环状树/圆形树 Circular Tree：
- Circle Packing：d3-hierarchy.pack()
- Radial Dendrogram：d3-hierarchy.cluster() + 径向链接
- 网络图 Network Graph：d3-force（力模拟）
- 热力图 Heatmap：band scales + 矩形网格（密集网格用 Canvas）
- 树状图 Tree Diagram：d3-hierarchy.tree()
- 甘特图 Gantt：时间比例尺 + band 行（在应用中计算排期）
- 时间线 Timeline：d3-scale 时间 + 注释（d3-shape）
- 日历图 Calendar Heatmap：时间分桶 + 网格布局（必要时用 Canvas）
- 里程碑图 Milestone Chart：时间线 + 点/标签布局
- 时序图 Sequence Diagram：文档场景优先用 Mermaid；仅在需要交互式编辑时用 D3
- 关键路径图 Critical Path：在应用中计算 CPM；渲染为高亮的甘特图/网络图
- 组织图 Org Chart：d3-hierarchy.tree() 配合紧凑节点布局
- 心智图 Mind Map：树/径向树，节点可折叠
- 因果图 Fishbone（Ishikawa）：自定义布局（骨骼为斜向分支）+ 标签
- 等值线图 Contour Map：d3-contour（网格 → 等值线/填充等值线）
- 分级着色 Choropleth：d3-geo + 区域填充比例尺
- 点密度 Dot Density：d3-geo + 点放置（多边形内或采样点）
常用 D3 构建模块（推荐）
- d3-selection、d3-scale、d3-axis、d3-shape、d3-zoom、d3-drag、d3-brush
- d3-hierarchy、d3-force、d3-sankey、d3-geo、d3-contour
参考
.github/instructions/70-d3-data-visualization-copilot-instructions.md
适用场景与限制
适用于在 Angular 项目中规划、选型和实现 D3 可视化，尤其是需要 signals-first 架构与无障碍支持的场景。关于收费、价格、平台支持范围等具体信息，资料中暂未提供。