mcpField
D
d3js-skill

d3js-skill

github.com/podo数据与数据库29169 次安装1 天前更新
代码仓库

关于 d3js-skill

d3js-skill 是用于生成 D3.js 数据可视化的技能，面向制作图表的开发者。它涵盖数据绑定、比例尺、坐标轴、过渡和交互，并生成基于数据转换的 SVG。

主要功能

  1. 01生成多种 D3.js 图表
  2. 02处理数据绑定与数据转换
  3. 03配置比例尺和坐标轴
  4. 04添加过渡与交互
  5. 05生成结构化 SVG

适用场景

  1. 01制作柱状图、折线图和散点图
  2. 02创建热力图或自定义图表

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill d3js-skill

安装后在 Claude Code 中输入/d3js-skill确认已加载。

附带文件stub.yaml

详细介绍

d3js-skill

目录占位条目——完整技能：chrisvoncsefalvay/claude-d3js-skill

决策树

  1. 是否已安装完整技能？ 检查此位置的技能是否仍包含 das: 块：

    • 全局：grep -q "^das:" ~/.agents/skills/d3js-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 项目：grep -q "^das:" .agents/skills/d3js-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 不含 das: 块 → 已安装完整技能，调用它并继续
    • 含有 das: 块 → 转到第 2 步

  2. 检测作用范围，然后安装：

    检测作用范围：

    [ -e ~/.agents/skills/d3js-skill ] && echo "global" || echo "project"

    全局（使用 -g 安装）：

    npx skills add chrisvoncsefalvay/claude-d3js-skill --skill d3js-skill -g -y

    项目（不使用 -g 安装）：

    npx skills add chrisvoncsefalvay/claude-d3js-skill --skill d3js-skill -y

    Claude Code： 将任一命令作为以 ! 开头的聊天消息发送，即可在不离开对话的情况下运行该命令。

安装后调用

  • 技能名称：d3js-skill
  • 触发短语："D3.js"、"D3 chart"、"D3 visualization"、"data visualization D3"

功能说明

生成复杂的 D3.js 数据可视化，正确使用数据绑定模式、比例尺、坐标轴、过渡效果和交互功能。支持柱状图、折线图、散点图、热图和自定义图表类型。生成结构规范的 SVG，并使用真实的数据集转换，而非仅提供静态示例。

评论

支持 Markdown