让AI直接画出精美图表：claude-d3js-skill 把 D3.js 可视化能力装进 Claude Code

前端数据可视化年年有新东西，但真正难的不是库，而是让 AI 帮你做出「可交互、可定制的图表」。最近我挖到一个叫 claude-d3js-skill 的开源项目，专门给 Claude Code 加了一套 D3.js 可视化能力，实测可用，值得单拎出来说。

先看数据

• 项目：chrisvoncsefalvay/claude-d3js-skill
• Star：213 ⭐（刚刚还在活跃更新）
• 语言：JavaScript
• 最近更新：2026-07-18

它是什么

这本质上是一个 Claude Code 的 Skill 包：把 D3.js 的完整可视化工作流封装进一个 SKILL.md，再辅以 assets/ 和 references/ 目录里的参考材料。你用自然语言告诉 Claude「给我画个力导向图」或「做个带缩放的时间线」，它就能输出可直接运行的 D3 代码。

解决了什么痛点

很多人会这样：让 AI 画图表，得到的代码总差一口气——比例尺搞错了、坐标轴没对齐、过渡动画写不出来。这个 Skill 的核心价值是给 Claude 一套「可视化 SOP」：

• 何时选 D3.js：定制化图表、力导向图、地理可视化、带交互的 SVG
• 何时不选：3D 可视化优先 Three.js，简单报表优先 ECharts/Chart.js
• 两套接入模式：直接 DOM 操作（Pattern A，推荐）和声明式渲染（Pattern B，适配 React/Vue/Svelte）

实测印象

我对这套 Skill 最直接的感受是：它没有试图「封装图表库」，而是教 Claude 正确使用 D3.js。这意味着输出代码灵活度很高——力导向图、树状图、旭日图、地理投影都能做。对于需要做数据叙事的团队来说，相当于多了一个「可视化副驾」。

谁适合用

• 用 Claude Code 做数据报告和分析的团队
• 需要定制化可视化、不想被 ECharts 模板框死的开发者
• 前端工程师想快速原型化交互式图表

怎么开始

直接克隆仓库，放到你的 Claude Code skills 目录即可。 Skill 支持按需渐进式加载，不会撑爆上下文。配合 Claude Code 的自动激活机制，只要你在 prompt 里提到 d3、可视化、图表，它就会自动挂载这套工作流。

项目地址：https://github.com/chrisvoncsefalvay/claude-d3js-skill

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