简诗 D3 交互图表与看板

解决什么问题

当你需要把业务数据放进报告、原型或编辑看板时，手写 D3 图表很容易陷入两个坑：一是临时拼 d3.select、比例尺和坐标轴，交互逻辑很快变得不可维护；二是示例找到了，但数据形状、交互粒度和输出环境不匹配，图表只能停留在 demo。

这个技能把 D3.js 的图表类型与技巧整理成 Agent 可调用的知识库，让模型在生成可视化时先判断任务类型，再参考示例组织代码和交互。

技能如何工作

• 图表能力覆盖：围绕 D3.js 常见图表类型与交互技术提供示例，适合需要复杂、可交互可视化的场景。
• 面向任务组织：Agent 会把请求映射到合适图表家族，例如树图、网络图、日历热力图，并决定缩放、拖拽、点击筛选等交互。
• 代码生成导向：产出的是可直接嵌入页面的 D3 代码或完整可视化片段，而不是只给截图或静态建议。
• 上下文适配：支持把用户提供的数据集替换示例数据，保留适合报告、数据密集型原型和解释性图形的结构。

适用边界

它更适合 已有明确数据字段和交互目标 的可视化任务；如果需求是简单的静态统计图，直接用图表库可能更省事。生成结果仍需检查数据处理、单位、空值和交互性能，因为复杂 D3 代码对数据结构和浏览器环境有实际约束。