# D3.js 数据可视化技巧 ## 什么是 D3.js D3.js（数据驱动文档）是一个 JavaScript 库，用于在 Web 浏览器中生成动态、交互式数据可视化。它使用 HTML、SVG 和 CSS 标准将数据绑定到 DOM 并应用数据驱动的转换。 ### 何时使用 D3.js **当您需要时选择D3.js：** * 自定义、独特的可视化效果在图表库中不可用 * 对每个视觉元素的细粒度控制 * 复杂的交互和动画 * 数据驱动的 DOM 操作不仅仅是图表 * 大数据集的性能（使用 Canvas 时） * 基于网络标准的可视化 **在以下情况下考虑替代方案：** * 简单的标准图表就足够了（使用Chart.js、Plotly） * 快速原型设计优先（使用 Observable、Vega-Lite） * 用于打印/报告的静态图表（使用 matplotlib、ggplot2） * 3D 可视化（使用 Three.js、WebGL 库） ### D3.js 与其他库的比较图书馆 |最适合 |学习曲线|定制化 ---|---|---|--- D3.js |自定义可视化 |陡峭 |完成 Chart.js |标准图表|简单|有限公司阴谋 |科学情节|中等|好高图表 |业务仪表板|简单|好三.js | 3D 图形 |陡峭 |完成 ** ** ## 核心工作流程 ### 1\.项目设置 **选项 1：CDN（快速启动）** <头> <元字符集=“utf-8”> <标题>D3可视化 <风格> 主体{边距：0;字体系列：无衬线字体； } svg { 显示：块； } <正文>

<脚本> // 这里是你的代码 **选项 2：NPM（生产）** npm 安装 d3 // 导入所有D3 从“d3”导入*作为d3； // 或者导入特定模块从“d3-selection”导入{ select, selectAll }; 从“d3-scale”导入{scaleLinear，scaleTime}； ### 2\.创建基本图表 // 设置尺寸和边距 const margin = {顶部：20，右侧：30，底部：40，左侧：50}； const 宽度 = 800 - margin.left - margin.right; const 高度 = 400 - margin.top - margin.bottom; // 创建SVG const svg = d3.select("#chart") .append("svg") .attr("宽度", 宽度 + 边距.左 + 边距.右) .attr("高度", 高度 + 边距.顶部 + 边距.底部) .append(“g”) .attr("变换", `翻译(${margin.left},${margin.top})`); // 加载并处理数据 d3.csv("数据.csv", d => ({ 日期：新日期（d.date），值：+d.值 })).then(数据 => { // 创建尺度 const xScale = d3.scaleTime() .domain(d3.extent(数据, d => d.date)) .range([0,宽度]); const yScale = d3.scaleLinear() .domain([0, d3.max(数据, d => d.value)]) .nice() .range([高度, 0]); // 创建并附加轴 svg.append(“g”) .attr("变换", `翻译(0,${height})`) .call(d3.axisBottom(xScale)); svg.append(“g”) .call(d3.axisLeft(yScale)); // 创建线生成器常量行 = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.value)) .curve(d3.curveMonotoneX); // 画线 svg.append("路径") .datum(数据) .attr("d", 行) .attr("填充", "无") .attr("笔画", "钢蓝色") .attr("笔划宽度", 2); }); ### 3\.添加互动性 **工具提示：** const 工具提示 = d3.select("body") .append("div") .attr("类", "工具提示") .style("位置", "绝对") .style("可见性", "隐藏") .style("背景", "白色") .style("边框", "1px 实线#ddd") .style("内边距", "10px") .style("边框半径", "4px"); 圈子 .on("鼠标悬停", 函数(事件, d) { 工具提示 .style("可见性", "可见") .html(`${d.name}
值：${d.value}`); }) .on("鼠标移动", 函数(事件) { 工具提示 .style("顶部", (event.pageY - 10) + "px") .style("左", (event.pageX + 10) + "px"); }) .on("鼠标悬停", 函数() { tooltip.style("可见性", "隐藏"); }); **过渡：** 圈子 .transition() .持续时间(300) .ease(d3.easeCubicOut) .attr("r", 8); ### 4\.实施响应式设计函数创建图表（）{ const 容器 = d3.select("#chart"); const containerWidth = container.node().getBoundingClientRect().width; const margin = {顶部：20，右侧：30，底部：40，左侧：50}； const width = 容器宽度 - margin.left - margin.right; const height = Math.min(宽度 * 0.6, 500); 容器.selectAll("*").remove(); // 清除前一个 // 创建 SVG... } // 初始渲染创建图表（）； // 通过去抖动调整大小重新渲染让 resizeTimer; window.addEventListener("调整大小", () => { 清除超时（调整大小定时器）； resizeTimer = setTimeout(createChart, 250); }); ** ** ## 关键原则 ### 数据绑定 * 使用`.data()`将数据绑定到DOM元素 * 处理进入、更新和退出选择 * 使用关键函数实现元素与数据的一致匹配 * 现代语法：使用 `.join()` 来获得更清晰的代码 ### 秤 * 将数据值（域）映射到视觉值（范围） * 使用适当的尺度类型（线性、时间、带状、序数） * 将`.nice()`应用于圆轴值的比例 * 反转自下而上坐标的 y 尺度范围：`[height, 0]` ### SVG 坐标系 * 原点 (0,0) 位于左上角 * Y 向下增加（与笛卡尔相反） * 使用边距约定以获得适当的间距 * 使用``标签对相关元素进行分组 ### 性能 * 对 <1,000 个元素使用 SVG * 使用 Canvas 处理 >1,000 个元素 * 聚合或采样大型数据集 * 去抖动调整大小处理程序 ** ** ## 图表选择指南 **时间序列数据？** → 折线图或面积图 **比较类别？** → 条形图（垂直或水平） **显示关系？** → 散点图或气泡图 **部分到整体？** → 圆环图或堆积条形图（限制为 5-7 个类别） **网络数据？** → 力向图 **分布？** → 直方图或箱线图有关详细的图表选择标准和最佳实践，请参阅 [`references/chart-types.md`]()。 ** ** ## 常见模式 ### 快速数据加载 // 加载带有类型转换的CSV d3.csv("数据.csv", d => ({ 日期：新日期（d.date），值：+d.值，类别：d.类别 })).then(数据 => { 创建图表（数据）； }); ### 快速工具提示选择 .on("鼠标悬停", (事件, d) => { tooltip.style("可见性", "可见").html(`值：${d.value}`); }) .on("鼠标移动", (事件) => { tooltip.style("top", event.pageY + "px").style("left", event.pageX + "px"); }) .on("mouseout", () => tooltip.style("可见性", "隐藏")); ### 快速响应 SVG svg .attr("viewBox", `0 0 ${宽度} ${高度}`) .attr("preserveAspectRatio", "xMidYMid 相遇") .style("宽度", "100%") .style("高度", "自动"); ** ** ## 质量标准 ### 视觉质量 * 对数据使用适当的图表类型 * 应用一致的配色方案 * 包括清晰的轴标签和图例 * 提供适当的间距和边距约定 * 使用适当的量表类型和范围 ### 交互质量 * 添加有意义的工具提示 * 使用平滑过渡（持续时间 300-500 毫秒） * 提供悬停反馈 * 启用键盘导航以实现辅助功能 * 实现缩放/平移以进行详细探索 ### 代码质量 * 在数据连接中使用关键函数 * 正确处理进入、更新和退出 * 更新前清理之前的渲染 * 使用可重复使用的图表模式来实现模块化 * 去抖动昂贵的操作 ### 辅助功能 * 添加 ARIA 标签和描述 * 提供键盘导航 * 使用色盲安全调色板 * 包括屏幕阅读器的替代文本 * 确保足够的色彩对比度 ** ** ## 辅助资源 ### 可用脚本 * **data-helpers.js** ：数据加载、解析和转换实用程序 * **chart-templates.js** ：用于常见可视化的可重复使用的图表模板请参阅 [`scripts/`]() 目录以了解实现。 ### 工作示例 * **line-chart.html** ：带有工具提示的时间序列可视化 * **bar-chart.html** ：分组和堆叠条形图 * **network-graph.html** ：强制定向网络可视化请参阅 [`examples/`]() 目录以获取完整的实现。 ### 详细参考资料 * **D3 基础知识** ：SVG 基础知识、数据绑定、选择、转换、事件 → [`references/d3-fundamentals.md`]() * **尺度和轴** ：所有尺度类型、轴自定义、调色板 → [`references/scales-and-axes.md`]() * **路径和形状**：线/面生成器、弧、力模拟 → [`references/paths-and-shapes.md`]() * **数据转换**：加载、解析、分组、聚合、日期处理 → [`references/data-transformation.md`]() * **图表类型** ：有关何时使用每种图表类型的详细指南 → [`references/chart-types.md`]() * **高级模式**：可重用图表、性能优化、响应式设计 → [`references/advanced-patterns.md`]() * **常见陷阱** ：常见错误及其解决方案 → [`references/common-pitfalls.md`]() * **集成模式** ：将 D3 与 React、Vue、Angular、Svelte 结合使用 → [`references/integration-patterns.md`]() ** ** ## 故障排除 **图表未出现？** * 检查浏览器控制台是否有错误 * 验证数据加载正确 * 确保SVG有宽度和高度 * 检查比例域和范围 **元素位置错误？** * 验证尺度域与数据范围匹配 * 检查 y 尺度范围是否反转：`[height, 0]` * 确认边距变换应用于``元素 * 检查SVG坐标系（左上角原点） **转换不起作用？** * 确保持续时间合理（300-500ms） * 检查转换是否应用于选择，而不是数据 * 验证缓动函数是否有效 * 转换前确认元素存在 **性能不佳？** * 减少 DOM 元素的数量（如果 >1,000，则使用 Canvas） * 汇总或样本数据 * 去抖动调整大小处理程序 * 最小化重绘 ** ** ## 外部资源 ### 官方文档 * D3.js API 参考： * 可观察示例： ### 学习资源 * Scott Murray 的“Web 交互式数据可视化” * D3 图库： * Amelia Wattenberger 的 D3 教程： ### 颜色工具 * ColorBrewer： * D3 配色方案： ### 灵感 * 可观察趋势： * Reddit r/dataisbeautiful： ** ** 此技能全面涵盖了 D3.js，用于创建专业的交互式数据可视化。使用核心工作流程作为起点，参考特定主题的详细参考，并根据您的需求自定义示例。

D3js 可视化

包含技能