SuperAPI AI 工具集

d3js

数据与分析

查看项目

更新于 10-16 07:57

技能介绍

用途:在用户要求创建 D3 可视化、D3 图表、柱状图等场景下,快速生成正确的 D3.js v7 可视化。

主要能力:支持三种输出格式——独立 HTML(默认)、HTML + 独立 JS 模块、React 组件(.tsx,使用 useRef 与 useEffect)。提供默认(直接实现)与创意模式两种工作流;创意模式面向艺术化、生成式可视化,先产出设计哲学文档再实现。默认约束:单屏无滚动(100vh)、SVG 使用 viewBox 响应式、Tableau10 等克制配色、系统字体、浅灰页面配白色面板、网格线与灰色刻度、面向 PDF/截图导出。无数据时生成写实的模拟数据。

使用方式:技能要求先用 AskUserQuestion 做三轮发现访谈(目标与数据、风格与细节、上下文与打磨),确认需求摘要后实现。D3 v7 通过 ES module CDN 引入:import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"。读取外部数据用 d3.csv、d3.json、d3.tsv;由于 CORS 限制,file:// 直接打开会失败,需本地服务:python -m http.server 8000。须遵循尺度、坐标轴、数据绑定、标签图例提示、过渡交互的实现顺序,并附无障碍属性。

适用场景:柱状图、折线图、面积图、散点、饼/环图、直方图、箱线图、热力图、山脊图,以及树图、旭日、圆堆积、力导向图、桑基、和弦、地理等值线等。

限制:外部文件加载必须经 HTTP;日期与数值需显式解析;需过滤空值避免 NaN;CDN 在离线环境需改本地 d3.min.js。资料未提供具体收费、价格或平台信息。