D3 自定义可视化
ReactD3Data Visualization图表SVG更新于 2026-08-14
使用场景： 构建标准图表之外的自定义可视化：网络关系图、层级树图、桑基流图与专属 D3 可视化。
安装
npx skills add d3-custom-visualizations克隆
git clone https://github.com/skillhub-community/d3-custom-visualizations.git描述
高级 D3 可视化库。图表：ForceDirectedGraph（可拖拽节点、链接样式与聚类检测的网络/关系可视化）、TreeMap（按值定大小的层级矩形+面包屑下钻）、SankeyDiagram（阶段/实体间的比例流链接+节点排序）、ChordDiagram（实体间关系带）与自定义 BezierConnector 绘制专属图。每个都是接受数据+选项的 React 组件，响应式缩放。
交互：悬停 tooltip（支持 HTML 内容）、点击选择联动详情面板、缩放/平移（d3-zoom）与进出场动画（d3 transitions，减少动态感知）。包含 D3-in-React 的经典避坑模式：拥有容器 ref、用 useMemo 计算布局（拖拽不重算整个图）、卸载时清理模拟力。附带数据建模小指南（如何为每种图塑形输入数据）与真实示例（组织架构图、销售流桑基图、话题聚类）。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@dataviz_team
许可证MIT
版本1.0.0
依赖1