用途：当图表需要自定义比例尺、标记、布局、过渡、缩放、刷选、标注或矢量导出，且声明式语法不再合适时，使用此技能构建浏览器端自定义可视化。
主要能力：D3 用于比例尺、布局、几何、标签、标注层与交互行为；支持 d3-array、d3-scale、d3-axis、d3-shape、d3-selection、d3-transition、d3-brush、d3-zoom、d3-drag 以及 d3-force、d3-hierarchy、d3-contour 等布局。适合 SVG 质量要求高、需导出/打印/无障碍、需要缩放、刷选、拖拽或联动视图，以及需要领域化矢量背景（球场、赛道、平面图等）的场景。
使用方式：先建立清晰数据模型，分离解析归一化、比例尺构建、派生几何、渲染与交互状态；连接中使用稳定键。SVG 图表完成前参考 svg-polish-and-crispness.md，明确设置字号、刻度间距、网格线、数据线宽等。移动端按容器测量重算布局，而非缩放桌面 SVG。在 React 等框架中，倾向框架负责结构、D3 负责几何比例尺与行为。
限制：当标记数量大到 DOM 吞吐成为瓶颈，或动画连续、帧预算紧张，或 Canvas2D/WebGL 更快时，避免以 D3 直接渲染 DOM。不要用 D3 替代整个应用架构。三维透视失真除非表示真实多轴表面应避免。
输出期望：解释为何选 D3 渲染层，保持结构语义可检查，提供 SVG 或 PNG 导出路径，交互配以明显标注和重置控件。移动端说明触控策略、悬停替代、拖拽/缩放归属以及设置面板返回图表的路径。