让Claude真正会用D3.js：这个Skill把数据可视化变成了对话

数据可视化这件事，AI 画出来的图总是差那么点意思——坐标轴歪的、颜色乱来的、交互效果消失的。不是 AI 不会画图，是它根本不知道 D3 是什么。

D3.js Visualization 这个 Skill，就是专门教 Claude 正确使用 D3.js 的。

它解决了什么问题

D3.js 是目前最强大的数据可视化库，但它的学习曲线极其陡峭——选择器、比例尺、轴、路径、过渡……每一个概念都需要理解才能正确使用。大多数 AI 生成的 D3 代码要么跑不通，要么图形丑陋缺乏交互。

这个 Skill 教会 Claude 怎么：
– 正确使用 D3 的核心 API（selection、scale、axis、path）
– 生成响应式图表（窗口缩放时自动适配）
– 添加过渡动画和交互效果（hover、click、zoom）
– 选择合适的图表类型来匹配数据结构
– 遵循数据可视化最佳实践（色彩编码、标签、图例）

典型使用场景

数据仪表盘：需要做一个展示业务数据的交互式仪表盘？告诉 Claude 你有什么数据，它会用 D3 生成带筛选、排序、hover 提示的可视化组件。

图表重构：手头有一段 D3 代码跑不起来或者效果不好？让这个 Skill 帮你 review 并改进。

从零生成：只需要描述你想要什么样的图表（比如「一个展示月度销售趋势的折线图，支持按季度筛选」），Claude 就能生成完整可运行的 HTML 文件。

效果怎么样

这个 Skill 的作者 chrisvoncsefalvay 是 D3.js 社区的活跃贡献者，Skill 本身包含完整的参考文档和示例，覆盖从基础图表（柱状图、折线图、散点图）到高级可视化（地图、流图、力导向图）的全场景。

生成的代码是基于 D3 v7 的现代写法，模块化、注释清晰，可以直接集成到 React/Vue 项目里。

安装方式

# 在 Claude Code 里安装
npx skills add https://github.com/chrisvoncsefalvay/claude-d3js-skill

# 或者手动复制 SKILL.md 到项目 .claude/skills/ 目录

安装后，只要对 Claude 说「帮我画一个……」或者「用 D3 做一个…」，Skill 自动激活。

GitHub：https://github.com/chrisvoncsefalvay/claude-d3js-skill（⭐ 231）

GitHub: https://github.com/chrisvoncsefalvay/claude-d3js-skill