用途:该技能用于指导使用 d3.js 创建精细、可交互的数据可视化。d3.js 擅长将数据绑定到 DOM 元素并做数据驱动变换,可跨原生 JavaScript、React、Vue、Svelte 等环境使用。
适用场景:需要自定义视觉编码或布局、复杂平移缩放刷选交互、网络/图可视化(力导向、树、层级、和弦)、自定义投影的地理可视化、编排过渡动画、出版级精细样式控制,以及标准库没有的新颖图表类型。3D 可视化建议改用 Three.js。
主要能力与用法:安装可 import * as d3 from 'd3',或用 CDN https://d3js.org/d3.v7.min.js。集成有两种模式:模式 A 直接操作 DOM(推荐多数场景,适合复杂交互与过渡);模式 B 声明式渲染,仅用 d3 做比例尺与布局计算,由框架渲染元素。标准绘制流程为:定义尺寸与边距、创建带 transform 的主分组、创建比例尺、添加坐标轴、绑定数据并 join 元素。响应式可用 window resize 监听或 ResizeObserver,并返回清理函数。
常见图表模式包括柱状图、折线图、散点图、和弦图、热力图、饼图、力导向网络。交互方面支持提示框(tooltip)、缩放平移(d3.zoom)、点击交互,以及 transition 过渡动画。
限制:资料未提供该技能的收费、价格、平台支持范围或效果数据;具体安装命令与完整代码示例以原始资料为准。