1实现原理 · 为什么它能做到
纯知识库型 skill：全部能力承载于 SKILL.md 单个 markdown（820 行 / 21.3KB），零脚本、零配置、零运行时。它自身不执行任何动作，只把 d3.js 的工程方法论以可复制代码块的形式交给宿主模型。
SKILL.md
This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.
注：『为什么能实现』的第一层答案：d3 的难点不在概念而在 API 面（比例尺/轴/数据绑定/过渡/投影/力导）与样板结构，本 skill 把这块压缩成模式化代码块，模型只需按图型检索并替换数据形状，无需自行推断 API 细节。
用渐进披露控制上下文预算：主干 SKILL.md 只放选型判断 + 4 步工作流 + 常用图型，深水区（层级图/地理/联动刷选/动画全谱）下沉 3 份 references，模板下沉 assets，正文末尾显式指示按需读取。
SKILL.md
To use these resources, read the relevant files when detailed guidance is needed for specific visualisation types or patterns.
注：references 合计 46.4KB（d3-patterns 21.6 + colour-schemes 12.8 + scale-reference 12.1），全量注入会吃掉大量上下文；分层是它能在单 skill 内覆盖 20+ 图型的工程手段。
跨框架宣称的实现方式是『把框架差异收敛为两条集成路径』：Pattern A 命令式操作 DOM（任何 JS 环境可用），Pattern B 只用 d3 算数据、渲染交还框架。
SKILL.md
**Pattern A: Direct DOM manipulation (recommended for most cases)** Use d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment:
注：这是 description 里『任何环境』的技术根据——真正跨框架的不是代码而是这条分层约定。但骨架示例与 assets 模板实际都落在 Pattern A + React 语境（见 second_pass 的 discrepancy）。
输出纪律：要求所有绘图函数遵循同一骨架（空数据早退 → 清场 → margin convention → scale/axis → join 绑定），并用编号注释把这套骨架写成检查表，压缩模型自由发挥空间。
SKILL.md
function drawVisualization(data) { if (!data || data.length === 0) return; const svg = d3.select('#chart'); // Or pass a selector/element svg.selectAll("*").remove(); // Clear previous render
注：骨架后紧跟注释编号 `// 1. Define dimensions` … `// 5. Bind data and create visual elements`（SKILL.md:106-150），模型照抄即可产出可运行代码；assets/chart-template.jsx 是同一骨架的 React 落地版。
版本被钉在 d3 v7：CDN 端点显式 v7，示例代码用 v7 API 风格（.join() 绑定、事件改为 handler 第一参数、无 d3.event），因此产出的代码对 v5/v6 旧项目不兼容。
SKILL.md
<script src="https://d3js.org/d3.v7.min.js"></script>
注：d3 v6 起事件从 d3.event 改为 handler 形参（示例 function dragstarted(event) 即 v7 写法）；把本 skill 用在旧版 d3 工程里需要人工降级。
把『非图型』的工程细节也写进正文而非留给模型猜：响应式（resize 监听 + ResizeObserver 双方案且返回 cleanup）、可访问性（role/title/desc）、性能降级（>1000 元素转 canvas）、常见故障排查。
SKILL.md
### Accessibility Make visualisations accessible: ```javascript // Add ARIA labels svg.attr("role", "img") .attr("aria-label", "Bar chart showing quarterly revenue"); // Add title and description svg.append("title").text("Quarterly Revenue 2024"); svg.append("desc").text("Bar chart showing revenue growth across four quarters");
注：这类规范是它敢宣称 publication-quality 的实际支撑（原文 SKILL.md:20 `Publication-quality graphics with fine-grained styling control`），也是它与纯代码片段仓库的差别所在。
2核心能力
01图型选型判断（含反向边界：3D 用 Three.js）
02基础图型即用配方 7 类：bar / line / scatter / chord / heatmap / pie / force-directed
03交互三件套：tooltip（跟随鼠标的浮层）、zoom/pan、click 反馈
04过渡与动画编排：基础/链式/错峰 delay/自定义 easing
05响应式尺寸与资源清理（window resize 监听 + ResizeObserver + 返回 cleanup 函数）
06比例尺与配色知识库：连续/序列/序数比例尺全谱 + 色板、色盲友好、对比度与领域化推荐
07地理可视化：Mercator 点图与 Choropleth（d3.geoMercator/geoPath，几何数据由调用方提供）
08可运行落地模板：React 基础图 106 行 + 交互图 227 行 + 8 组示例数据
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | d3（npm 包，v7 API 面） |
| network | d3js.org CDN（d3 v7 min，产物可选的加载路径，无 SRI） |
| package | react（assets 模板 import） |
| package | tailwindcss（模板用 className 原子类，无显式 import，隐含样式依赖） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 产物侧供应链与版本漂移 — SKILL.md:39 的 CDN 引入未带 SRI，d3 v7 的补丁版本变化会直接进入用户页面；模板另引入 react 与 Tailwind 类名，模板代码在非 Tailwind 工程里会静默失样式。
- 示范代码的 DOM XSS 面 — SKILL.md:570 与 interactive-template.jsx:112-118 用 `.html()` 拼接未转义数据。图表数据若来自第三方或用户输入，模型照此示范产出的代码即可被执行注入；应改 `.text()` 或转义。
- 资源文件名写错导致取材失败 — SKILL.md:814-815 指 `chart-template.js`/`interactive-template.js`，实际为 `.jsx`。依赖模型读正文取文件的流程会失败，或诱发臆造模板内容。
- 跨框架覆盖被高估 — Vue/Svelte 无任何示例与模板（description 与 SKILL.md:818 的宣称超出交付物）；这些环境的用户需自行改写，等于退回骨架示例。
- 维护与授权状态不明 — 仓库仅 1 个 commit（2025-10-17 创建，最后 push 2025-10-18），无 LICENSE，GitHub license=null。既无后续维护记录，也未授予明确再分发许可。
风险提醒：绿色，放心使用。纯指令型知识库：无脚本执行、无网络外发、无凭证读取、无强制本地写入——全目录仅 7 个文件（SKILL.md + 3 份 md 引用 + 2 份 jsx 模板 + 1 份 json 数据），逐字节扫描除 d3 CDN 外无 URL、无 exec/fs/env/密钥字样（唯一字面命中是 `defs.append(` 里的 `fs.` 假阳性）。两个使用侧注意点不改变档位（均发生在产物而非 skill 本体）：① 产物依赖 d3/React/Tailwind，且 CDN 引入未带 SRI；② 教程与交互模板示范用 `.html()` 拼接数据，渲染第三方数据时构成 DOM XSS 面。
5第二遍独立确认
- [ok] official_desc 原文（frontmatter description） — SKILL.md:1-4 有完整 frontmatter，name: d3-viz、description 441 字符，已原文写入 meta.official_desc。
- [ok] 外部资源/网络端点清单 — 全目录 URL 扫描仅 1 条：https://d3js.org/d3.v7.min.js（SKILL.md:39）。无 fetch/d3.json/d3.csv/XMLHttpRequest 调用，无 API 端点、无 CLI 调用；地理图几何数据由调用方传入（d3-patterns.md:608-611），无 tile/topojson/atlas 拉取（grep topojson|us-atlas|world-atlas 零命中）。
- [ok] 凭证/环境变量读取 — grep process.env|API_KEY|token|secret|localStorage 全目录零命中（不区分大小写）。
- [ok] 脚本执行面 — 无 scripts/ 目录、无 package.json、无 shell/python 文件；两份 .jsx 是给宿主工程用的 UI 模板，不被 skill 执行。唯一 exec 相关字面命中为 references/d3-patterns.md:366 `defs.append("linearGradient")` 中的 `fs.`（假阳性），人工确认非文件系统调用。
- [discrepancy] 资源引用与实际文件名一致 — SKILL.md:814-815 写 `chart-template.js` / `interactive-template.js`，实际文件为 `assets/chart-template.jsx` 与 `assets/interactive-template.jsx`（React JSX）。模型按正文文件名读取 assets 会落空（`.js` 不存在），只能靠 glob 或猜后缀——这是第一遍照抄资源段时容易漏掉的错，第二遍以 find 结果纠正。
- [discrepancy] 『跨框架可用』宣称与模板实现一致 — SKILL.md:3（description）与 SKILL.md:10（Overview）宣称 React/Vue/Svelte/vanilla 全支持，SKILL.md:818 更称两份模板『work with vanilla JavaScript, React, Vue, Svelte』；但两份模板首行均 `import { useEffect, useRef, useState } from 'react'`（chart-template.jsx:1、interactive-template.jsx:1），且正文/模板使用 Tailwind 类名（chart-template.jsx:78,101 `className="chart-container"` / `className="p-8"`）。Vue/Svelte 在全文只出现于 description 与 Pattern B 注释，无任何示例代码——宣称覆盖面被高估，实际是 React+Tailwind 优先、vanilla 次之。
- [ok] 地理可视化能力是否真实（描述主张之一） — 主干 SKILL.md 无地理章节（第一遍据此可能误判为『宣称未兑现』），但 references/d3-patterns.md:594 起确有 `## Geographic visualisations`，含 Basic map with points 与 Choropleth 两个完整实现（d3.geoMercator + geoPath）。结论修正为：能力存在，但只在下沉文档里，主干不提示地理章节位置。
- [ok] d3 版本一致性 — CDN 显式 v7（SKILL.md:39），示例用 .join() 与事件形参写法（v7 语义）；全文无 d3.event（v5 语义）残留。
6结论
适合：适合需要在 React/vanilla 工程里产出定制可视化（力导网络、弦图、热力图、Choropleth、带 pan/zoom/brush 的交互图）的开发者与 agent 会话；也适合作为『d3 代码怎么写才工程化』的团队内规范参考（骨架、响应式 cleanup、可访问性、性能降级四段可直接当 checklist）。作为 skill 使用时，值在于把选型与骨架固化，省掉模型自行推断 d3 API 的回合。
不适合：不适合 3D 可视化（正文自己指向 Three.js）；不适合 Vue/Svelte 项目直接套用（模板与示例均为 React+Tailwind）；不适合 d3 v5/v6 旧工程（API 面按 v7 写）；不适合需要 SRI/离线依赖的合规环境（CDN 无完整性校验，需改为自托管 d3）；也不适合期望 skill 自动渲染或自测图表的场景——它只产出代码，不执行、不预览。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 d3-js-visualization.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agente9922be6af3bb98d…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库chrisvoncsefalvay / chrisvoncsefalvay/claude-d3js-skill
Stars230
最近推送2025-10-18
本 skill commit
e198c87d03许可无（工作副本根目录无 LICENSE 文件，仅 SKILL.md + assets/ + references/；GitHub API license 字段为 null）。即未授予任何许可，再分发/商用前需向作者确认。
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。