让 Claude 替你画图：D3.js 可视化 Skill，把数据变成艺术

让 Claude 替你画图：一个 D3.js 可视化 Skill，把数据变成艺术

做数据可视化这事，传统流程是：先把数据整明白，再用 D3.js 吭哧吭哧写一堆代码，调试半天，最后才出来一张图。这个过程里，AI 其实完全可以帮你做更多——不只是生成代码，而是理解你要画什么图、怎么画、画完怎么调。

最近 GitHub 上出现了一个叫 D3.js Visualization 的 Claude Skill（作者 @chrisvoncsefalvay），就是来解决这个问题的。

它能做什么？

装上这个 Skill 之后，Claude 就学会了 D3.js 可视化的「正确打开方式」。你只要说「帮我画一个交互式折线图」「做一个力导向网络图」「用地图投影可视化全球数据」，Claude 就能生成完整、可运行的 D3.js 代码。

支持的图表类型包括：

• 自定义折线图、柱状图、散点图
• 力导向图（Force-directed graph）
• 树图、层次图、弦图
• 地理投影地图
• 带交互（缩放、刷选、悬停提示）的复杂图表

两种写法，适配不同场景

Skill 提供了两种 D3.js 使用模式：

模式 A：直接操作 DOM（推荐大多数场景）
用 d3.select() 直接操作 SVG，绑数据、调样式、加动画，Claude 写的代码拿来就能跑。

模式 B：声明式渲染（适合 React/Vue 框架）
D3 只负责算比例尺和布局，渲染交给前端框架来做。Claude 会输出一个 getChartElements() 函数，React 里直接 .map() 就出图。

安装方式

在 Claude Code 里一行命令搞定：

/plugin marketplace add chrisvoncsefalvay/claude-d3js-skill

装完说「帮我用 D3 画一个比特币价格走势图」，Claude 就会：定义尺寸和边距 → 创建比例尺 → 生成坐标轴 → 绑数据画线 → 加交互提示框。整个过程不需要你写一行代码。

谁适合用？

如果你经常要做数据可视化，但不想每次都去翻 D3.js 文档，这个 Skill 能省不少时间。它让 Claude 从「帮你写代码」升级到「帮你做可视化」，理解你的数据结构和展示意图之后直接输出成品。

适合前/后端开发者、数据分析师、以及需要在网页里展示复杂数据的各种场景。

GitHub 链接

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

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