D3.js 数据可视化技能
让 Claude 生成高质量、可交互的 d3.js 数据可视化代码，覆盖从基础图表到力导向网络图的完整场景。
SKILL.md 是纯知识型指导文件，无脚本执行、无外部副作用、无权限请求、无数据外流路径；数据流透明（用户提供数据→本地渲染）。扣分点：来源归属与许可元数据缺失，作者身份未经验证，且提示词模板中存在 tooltip 使用 .html() 直接拼接 d.label/d.value 的潜在 XSS 注入面，未作转义提示。
示例代码整体自洽，含空数据防护、常见问题排查章节，失败路径有一定说明。扣分点：静态评审下关键路径未复现；chord diagram 示例中 d3.ribbon() 的 source/target 配置与 d3 v7 期望的参数化 accessor 存在疑点；无测试、无边界用例、异常输入的错误反馈依赖隐式行为。
触发条件在 description 中描述清晰（自定义图表、网络图、地理可视化等），并明确非适用范围（3D 用 Three.js）与替代方案，跨框架适用性说明到位。扣分点：未声明环境依赖细节（如 CDN 在受限网络下的可达性）、无中文场景支持说明、触发边界对简单图表场景可能过宽（标准图表库更合适时也可能被误触发）。
文档结构分层良好（概览→工作流→模式→排错→资源），采用渐进式披露引用 references/ 与 assets/。扣分点：skill 级别无许可声明、无版本号与变更记录、无维护责任与更新路径说明；license 元数据为 unknown，归属主体未经验证。
内容覆盖常见图表类型与交互，产出可直接使用的代码片段，相对人工查文档有明显边际价值；含数据清洗、性能、可访问性最佳实践。扣分点：静态评审下无法验证示例输出可直接运行，部分示例（chord diagram、热力图图例）疑似需修改才能工作，边际价值证据有限，静态上限为 7。
文件内提供了可审计的完整代码示例与结构化说明，属于一级材料。扣分点：无测试套件、无第三方执行证据、无跨源佐证，结论与推断未分离标注，静态上限下仅能给出有限分数。
- 提示词中的 tooltip 示例使用 .html() 直接注入未转义的用户数据（d.label/d.value），如数据来源不可信可能导致 XSS，使用时应改用 .text() 或转义。
- chord diagram 示例中 d3.ribbon() 的 source/target 用法与 d3 v7 API 存在疑点，使用前应对照官方文档核对。
- 许可与作者身份未经验证，企业采用前应先确认仓库许可证与维护状况。
- 本评审为纯静态评审，未执行任何代码，实际可用性需自行复现验证。
- CDN 加载 d3js.org 在部分受限网络环境下可能不可达，建议改用本地打包依赖。
这个 Skill 能做什么，适合哪些场景？
这是一个知识型 Claude 技能，指导模型使用 d3.js 编写自定义交互式数据可视化代码。技能内容涵盖直接 DOM 操作与声明式渲染两种集成模式，并提供柱状图、折线图、散点图、弦图、热力图、饼图和力导向网络图等模板代码，以及缩放、工具提示、过渡动画、比例尺参考和可访问性、性能优化等最佳实践。代码示例同时适配原生 JavaScript、React、Vue 和 Svelte。技能本质是提示知识而非可执行程序：它产出代码，但不运行任何脚本。
读取用户的可视化需求和数据结构，生成基于 d3.js（7.x）的 SVG 可视化代码。它提供：标准绘图函数结构（边距、比例尺、坐标轴、数据绑定）、两种集成模式（直接 DOM 操作、框架内声明式渲染）、响应式尺寸方案（resize 监听与 ResizeObserver）、交互实现（工具提示、缩放平移、点击事件）、过渡与缓动动画、各类型比例尺参考，以及大数据量性能优化和 ARIA 无障碍建议。附带 references/ 参考文档和 assets/ 中的图表、交互模板及示例数据文件，供按需查阅。
- 需要在 React/Vue/Svelte 项目中实现标准图表库无法满足的自定义 SVG 可视化的前端开发者
- 需要力导向网络图、树状图、弦图等关系型图表展示实体关系的数据分析师
- 需要自定义地理投影和地图可视化的开发者
- 需要为出版物或报告制作精调样式、含过渡动画图表的可视化工程师
- 需要交互式探索功能（缩放、平移、刷选）的数据看板构建者
这个 Skill 有哪些优点和局限？
- 覆盖面广：从基础图表到弦图、力导向网络图均有完整可运行代码模板
- 框架中立：同时给出原生 JS、React、Vue、Svelte 的集成方式
- 包含常被忽略的工程细节：响应式尺寸、性能优化、ARIA 无障碍、常见问题排查
- 附带比例尺完整参考和配色方案文档，减少查官方文档的需要
- 纯知识型技能：只生成代码，不执行、不预览、不验证渲染结果
- 项目无开源许可证信息（License: unknown），商用前需确认授权
- 仓库无 topics 标签、README 未缓存，缺少社区使用佐证和测试证据
- 3D 可视化明确不支持，指引改用 Three.js
- 未提供安装与使用说明，需依赖 Agent Skills 的通用约定
如何安装这个 Skill？
仓库地址为 https://github.com/chrisvoncsefalvay/claude-d3js-skill，技能入口文件为 SKILL.md。标准做法是将仓库克隆为技能目录（含 SKILL.md 及 references/、assets/ 子目录）放入 Claude Code 的 skills 目录。仓库 README 未缓存，未提供具体安装命令或官方安装说明。
如何使用这个 Skill？
安装后，在涉及可视化的任务中触发该技能，例如提示："用 d3.js 为我画一个按季度着色的销售热力图，带颜色图例和工具提示"。技能说明指出：当需要自定义图表、网络图、地理可视化或任何需要精细控制 SVG 元素、过渡和交互的场景时应使用此技能；3D 可视化应改用 Three.js。
这个 Skill 与同类方案有什么区别？
技能自身明确划定了边界：标准图表库可满足的常规需求、以及 3D 可视化，建议分别使用常规图表库和 Three.js，而非 d3.js。