claude-d3js-skill
在Claude中生成和编辑D3.js数据可视化代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-d3js-skill。 它的用途是：在Claude中生成和编辑D3.js数据可视化代码 完整的 Skill 内容见：https://321skill.com/skills/claude-d3js-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我用D3.js画一个展示公司部门关系的力导向图，节点大小代表人数，连线粗细代表合作紧密度。' 它会生成包含数据绑定、力模拟、节点与连线绘制、以及鼠标悬停交互的完整JavaScript代码，并解释关键步骤。
介绍
这个Skill旨在帮助用户在Claude中直接生成和编辑基于D3.js的数据可视化代码。它解决了开发者在创建复杂、定制化图表时，需要频繁查阅文档、调试代码的痛点，通过AI辅助快速生成可运行的D3.js代码片段。
使用时，用户只需向Claude描述想要的可视化效果（如类型、数据、交互需求），Skill便会提供结构化的D3.js代码，涵盖从数据绑定、比例尺设置、SVG元素绘制到交互事件处理的完整流程。它支持直接DOM操作和声明式渲染两种模式，以适应不同框架环境。
该Skill适合前端开发者、数据分析师、科研人员以及任何需要在网页中实现非标准、高交互性数据可视化的人员。无论是制作独特的网络图、地理信息图，还是需要精细动画过渡的图表，都能从中获得高效指导。
与常见的图表库（如Chart.js、ECharts）的Skill不同，本Skill专注于提供底层、灵活的D3.js代码生成能力，强调对视觉元素的像素级控制和复杂交互逻辑的实现，而非调用封装好的图表API。
核心特点
本Skill专注于生成底层、可高度定制的D3.js原生代码，而非调用封装好的图表库API，特别擅长指导实现复杂交互（如力导向图、地理投影、刷取缩放）和精细的动画过渡效果。
注意事项
不适合需要快速生成简单标准图表（如饼图、柱状图）或进行3D可视化的场景。
常见问题
如何用这个Skill在React里画D3图表？
Skill会提供两种模式：直接操作DOM（使用ref）或仅用D3计算数据，用React渲染元素。
能生成带缩放和拖拽的地图吗？
可以，Skill会指导使用d3-zoom和d3-geo投影生成交互式地图。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-d3js-skill/raw/index.md 读取 claude-d3js-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-d3js-skill/raw/index.md（查看排版版本）