d3-viz

详细功能介绍：

> 本技能提供系统化的 D3.js 数据可视化方法论，涵盖图表创建、交互设计、动画过渡和性能优化，帮助开发者在任意 JavaScript 环境中构建出版级质量的自定义可视化。

核心能力

1. 可视化类型覆盖

类型	适用场景
基础图表	条形图、折线图、散点图、饼图
关系图	力导向网络图、和弦图、树状图
矩阵类	热力图、相关性矩阵
地理类	自定义投影地图
特殊布局	时间线、径向图、自定义编码

2. 两种集成模式

模式 A：直接 DOM 操作（推荐）

• D3 直接选择并操作 DOM 元素
• 适用于复杂可视化、过渡动画和完整 D3 能力利用
• 代码示例提供标准绘制函数结构

模式 B：声明式渲染

• D3 负责数据计算（比例尺、布局）
• 框架（React/Vue/Svelte）负责元素渲染
• 适用于简单可视化或框架偏好声明式的场景

3. 响应式尺寸适配

• 基于 ResizeObserver 或 window resize 监听容器变化
• 自动重新计算尺寸并重绘
• 提供清理函数防止内存泄漏

核心工作流

标准绘制函数结构

function drawVisualization(data) {
 // 1. 数据校验
 // 2. 设置尺寸和边距
 // 3. 创建比例尺（scaleLinear/scaleBand/scaleTime 等）
 // 4. 绘制坐标轴
 // 5. 绑定数据并创建视觉元素
 // 6. 添加交互和动画
}

关键配置项

• 尺寸：width、height、margin（top/right/bottom/left）
• 比例尺：线性、对数、时间、序数、分段等
• 数据绑定：.data().join() 模式处理 enter/update/exit

交互功能

交互类型	实现方式
工具提示	鼠标悬停显示详细数据，跟随光标定位
缩放平移	d3.zoom 实现，支持 scaleExtent 限制
点击选择	视觉反馈 + 自定义事件派发
拖拽	d3.drag 实现节点拖拽（力导向图）

动画过渡

// 基础过渡
selection.transition().duration(750).attr("r", 10);

// 链式过渡
selection.transition().duration(500).attr("fill", "orange")
 .transition().duration(500).attr("r", 15);

// 错开过渡
selection.transition().delay((d, i) => i * 50).duration(500).attr("y", d => yScale(d.value));

比例尺速查

比例尺	用途	示例
scaleLinear	连续数值映射	坐标轴、位置
scaleLog	指数数据	科学数据、增长率
scaleTime	时间序列	日期范围
scaleBand	分类数据	条形图
scaleOrdinal	离散映射	颜色编码
scaleSequential	渐变色彩	热力图

最佳实践

数据准备

• 过滤无效值（null、NaN）
• 排序数据（如需要）
• 解析日期格式

性能优化

• 大数据集（>1000 元素）使用 Canvas 替代 SVG
• 使用 quadtree 碰撞检测
• 防抖 resize 处理
• 避免不必要重渲染

无障碍设计

• 添加 ARIA 标签和 、
• 确保颜色对比度充足
• 提供键盘导航
• 附带数据表格替代方案

样式规范

• 统一定义色彩调色板
• 使用一致的字体和间距
• 添加 subtle 网格线辅助读图

文件资源

• d3-patterns.md — 完整可视化模式与代码示例
• scale-reference.md — 比例尺使用指南
• colour-schemes.md — 配色方案推荐
• chart-template.js — 基础图表模板
• interactive-template.js — 含工具提示和交互的模板
• sample-data.json — 测试数据集

常见问题

问题	解决方案
坐标轴不显示	检查比例尺 domain 有效性、确认 transform 正确
过渡动画失效	确保 .transition() 在属性变化前调用
响应式失效	使用 ResizeObserver，更新维度触发重渲染
性能问题	大数据集换 Canvas，使用 .join() 优化数据绑定

注意事项

• 3D 可视化：建议使用 Three.js，D3 不适用
• 框架集成：React 中注意 useEffect 依赖管理，避免重复渲染
• 数据更新：使用 .join() 替代传统的 enter/update/exit 模式，代码更简洁