菜单
D3.js (Data-Driven Documents) — A JavaScript library for data visualization. Covers installation, selections, data binding, scales, shapes, transitions, 30+ module reference, chart templates, React/Svelte integration. For custom SVG/Canvas visualizations.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/sujian666666com-glitch/kk-skill --skill d3js命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Discover and filter 15,330 The Graph subgraphs by domain, network, protocol type, or natural language goal. Each result includes an x402 query URL — $0.01 USDC on Base per call, no API key required.
Audit and reduce AI agent runtime spend in dollars. Use for AI costs, agent spend, token waste, runtime attribution, detector coverage, and FinOps. Works with OpenClaw, Hermes, QM, Claude Code, Cursor, and generic event ingest.
Use this skill whenever the user is troubleshooting a VMware/vSphere problem — a reported error, an exception, a log dump, a slow or failed VM, a host that went sideways — and needs help locating the root cause. It is the diagnostic brain of the VMware family: it drives a systematic investigation, pulls the right signals from the other skills, correlates events into one timeline, ranks root-cause hypotheses, and tells you what to check next even when you don't know where to start. Always use this skill for "diagnose this VMware issue", "why is my VM slow", "troubleshoot this vSphere error", "what does this log mean", "help me figure out what broke" when the context is explicitly VMware/vSphere/ESXi/NSX. It is READ-ONLY: it never changes anything. Do NOT use it to execute fixes — single fixes go to vmware-aiops, multi-step gated remediation goes to vmware-pilot. Do NOT use it for routine inventory or health checks with no problem to solve — use vmware-monitor.
基于 SOC 职业分类
正在显示 SKILL.md
| name | d3js |
| description | D3.js (Data-Driven Documents) — A JavaScript library for data visualization. Covers installation, selections, data binding, scales, shapes, transitions, 30+ module reference, chart templates, React/Svelte integration. For custom SVG/Canvas visualizations. |
D3 v7 · Low-level toolbox · 30+ composable modules · Web standards (SVG/Canvas/DOM)
ESM: import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
UMD: <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
npm: npm install d3 → import * as d3 from "d3"
Submodules: import {mean} from "d3-array"
import * as d3 from "d3";
const data = [10, 20, 30, 40, 50];
const svg = d3.create("svg").attr("width", 400).attr("height", 200);
const x = d3.scaleBand().domain(data.map((d,i)=>i)).range([0,350]).padding(.2);
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([150, 0]);
svg.selectAll("rect").data(data).join("rect")
.attr("x", (d,i)=>x(i)).attr("y", d=>y(d))
.attr("width", x.bandwidth()).attr("height", d=>150-y(d))
.attr("fill", "steelblue");
document.getElementById("chart").append(svg.node());
| Module | Purpose | Location |
|---|---|---|
| selection/scale/shape/axis/transition/path/ease | Selections·Scales·Shapes·Axes·Transitions·Path·Easing | essentials |
| array/format/interpolate/color/random/dispatch/timer | Array stats·Number format·Interpolation·Color·Random·Events·Timer | advanced |
| polygon/quadtree/delaunay/chord/contour | Polygons·Quadtree·Delaunay·Chord·Contour | advanced |
| force/hierarchy/geo/zoom/brush/drag | Force·Hierarchy·Geo·Zoom·Brush·Drag | advanced |
| dsv/fetch/time/time-format | CSV·Fetch·Time intervals·Time format | data |
| scale-chromatic | Color schemes (schemeCategory10/interpolateViridis) | essentials |
| File | Content |
|---|---|
| essentials.md | Selections·Data join·Scales·Axes·Shapes·Transitions·Easing·Path·5 chart templates·React/Svelte·Margin |
| data.md | CSV/JSON/TSV loading·Parsing·Formatting·Time intervals·Time formatting |
| advanced.md | Array stats·Interpolation·Color·Random·Events·Timer·Polygons·Quadtree·Chord·Contour·Delaunay·Force·Hierarchy·Geo·Zoom·Brush·Drag |
Usage principle: D3 has no "chart" abstraction. Visualizations are built by composing selections + scales + shapes + axes. No automatic chart generation — only component-level precise control. Use Canvas for 5000+ data points.