PeacefulWinter的博客

本篇为《D3.js in Action》全新第3版4.3节内容，主要介绍了 D3 面积图的绘制方法。文章通过大量生动形象的示意图进行讲解，让看似复杂的 D3 面积图实现变得轻松有趣，体现了 D3.js 在基本图元的绘制方面具备的强大功能与极高的灵活性。为了提高可视化效果的可读性，还特意添加了文本标签及指示线，顺带介绍了 SVG 文本元素基准线相关的知识。对 D3 绘图感兴趣的朋友建议收藏起来，以备后用。

本篇为《D3.js in Action》全新第3版4.2节内容，主要介绍了本章示例折线图中纯折线部分的绘制方法，同时结合 D3 提供的强大插值函数，对绘制好的折线做了相应的线性插值处理，进而针对不同的插值算法对折线图的渲染效果进行了对比分析。干货满满，强烈建议收藏！

本篇为专栏第 035 篇的拓展，主要介绍了在绘制 D3 时间坐标轴时用到的一个日期格式化函数：d3.timeFormat()。通过官方文档解读切入，在进一步了解函数用法的基础上，尝试从源码层面探究D3日期格式化的底层逻辑，手把手带领读者学通悟透D3日期格式化的细节问题，并在文末复盘梳理了分析源码的一些好的经验。感兴趣的朋友可以收藏起来，算是对原书相关内容的一个补充。

本篇根据《D3.js in Action》最新第3版4.1节内容，在 Observable 平台同步实现了一版基于示例数据集的 D3 折线图坐标轴，并根据自定义的单元测试类和断言方法对其中的日期格式化工具函数进行了单元测试（最终全部通过）。文章对本次实战演练的全过程进行了完整介绍，并在最后对相关知识点及易错点进行了复盘总结。感兴趣的朋友可以对照练习。建议收藏！

本篇为《D3.js in Action》全新第3版4.1节的后半部分内容，详细介绍了示例折现图中的两个坐标轴的绘制，以及轴标签格式的自定义设置。文章通过大量生动形象的示意图与详细的讲解，手把手教会大家 D3 坐标轴的具体绘制，为后续丰富多彩的可视化效果定制打下坚实基础。强烈建议先收藏，然后跟随本文思路在本地实践一下。

本篇主要介绍了 D3 的外边距约定及 D3 坐标轴的基本概念。文章新引入一个时间比例尺的概念，并通过详细讲解和精美配图，指导读者完成相关组件的绘制实现。由于篇幅原因，本篇仅为折线图坐标轴部分的中篇，后续拟再用三个子篇章进行介绍。这从侧面也可以看出 D3 坐标轴这个知识点的信息密集程度。建议感兴趣的朋友务必下载源代码跟随练习，先收藏起来。欢迎评论交流、转发请注明出处。谢谢！

本篇根据《D3.js in Action》第3版4.1节推荐的一篇博文，顺藤摸瓜从GitHub公布的源码入手，将 d3.autoType 工具函数的用法及容易踩到的坑进行了深入挖掘，并通过 AI 工具对函数源码的解读，成功修复了 D3.js 官网中的一个测试Bug，最终成功提交PR。全过程完整记录，方便各位对 D3.js 以及数据可视化感兴趣的朋友参考。欢迎评论、转发、收藏。

本篇为《D3.js in Action》全新第3版第4章4.1小节的上篇，主要介绍了本章要实现的可视化项目背景，以及本章需要重点学习的 D3 概念——各种线段的绘制（直线、曲线、弧线）。它们是后续复杂可视化项目开发的核心基础。最后详细演示了项目环境的搭建及基本的数据加载等。建议根据上传的本章源码，在本地同步练习。建议收藏！

本篇根据《D3.js in Action》全新第3版第3章内容，在 Observable 完整实现了一版 D3 条形图的绘制，并通过自定义的方式实现了在 Observable 上编写简单的单元测试及测试套件，实现了相关组件的轻松导入，便于今后复用。文章给出了整个定制过程的全部实现细节，期间还借助了 AI 提示词工程，感兴趣的朋友可以收藏起来，以备后用。

本篇为《D3.js in Action》全新第3版第三章的最后一部分内容，在前面从零开始实现了一个 D3 条形图后，在这里给大家附上了一段对匈牙利知名平面设计师、数据可视化领域的名家大咖 Krisztina Szűcs 的人物专访。从大师的分享中，可以汲取力量，避坑前辈们踩过的一些坑，站在巨人的肩膀上攻克 D3.js。最后还梳理了本章的重要知识点，强烈建议大家收藏。

本篇为《D3.js in Action》全新第3版3.5节内容，详细讲解了本章的示例条形图的最终实现过程，在之前章节的基础上添加数据标签的过程，并讲解了代码重构需要考虑的关键细节以及其他注意事项。通过手把手地指导，即使是零基础的 D3 爱好者，也能跟着本文思路绘制出一副漂亮的 D3 条形图。本文还穿插了大量直观精美的 D3 原理剖析图，非常适合入门级学习，强烈建议收藏。

本篇根据《D3.js in Action》全新第3版3.4节内容，将第三章的示例条形图的绘制放到了 Observable 平台，并详细介绍了 Observable Notebook 的使用方法及注意事项。Observable 是 D3.js 创始人 Mike Bostock 为其量身打造的线上可视化项目演练平台，几乎汇集了全世界所有 D3 顶尖高手的一线最佳实践，非常值得 D3 爱好者一探究竟。建议收藏本篇，持续精进 D3 技术！

本篇为《D3.js in Action》全新第3版3.4.3节内容，详细介绍了示例条形图需要的第二类比例尺——分段比例尺（band scale）的用法及注意事项。通过对绑定数据的定义域于作用域的设置，大幅免去了手动计算的繁琐操作。建议感兴趣的朋友在本地实测。建议先收藏起来。

本篇为本专栏第25篇内容的同步实战案例，详细介绍了 D3 线性比例尺在本地服务器环境的构建、使用、测试全过程。使用的测试框架为 Mocha.js，断言工具用的是 Chai.js。最后还对测试结果进行了总结复盘。线性比例尺看似简单，若要在本地环境下运用自如，还需要认真对待。本篇所有实战代码都已上传 CSDN 平台，感兴趣的朋友可以同步下载尝试一下。欢迎多多交流！

本篇为《D3.js in Action》全新第3版3.4节的中篇，主要介绍了 D3 中使用频率最高的线性比例尺函数的具体用法。通过大量绘制精美的示意图，轻松带领大家从零开始实现一个简洁美观的D3条形图。对 D3 可视化感兴趣的朋友建议收藏！

本篇为《D3.js in Action》最新第3版3.4小节内容的上篇，主要介绍了不同类型的 D3 比例尺在将各类数据（连续型、离散型）转换为用于屏幕渲染的视觉属性（尺寸大小、颜色、方位信息等）时的具体做法及考虑因素。同时以一个生动形象的案例切入，配合精心制作的插图，可以让 D3 新手快速熟悉比例尺的相关术语及用法，建议收藏转发。

本篇为《D3.js in Action》全新第三版3.3小节内容，主要介绍了 D3 在绑定数据到 DOM 元素过程中的一些大致原理与基本用法。通过大量精美的插图与极为细致的案例讲解，让即便是零基础的 D3 爱好者也能快速理解复杂精巧的 D3 数据绑定机制。强烈建议大家收藏起来，跟随作者的思路在本地实操一遍，效果更好！

本篇为《D3.js in Action》最新第3版3.2小节内容，主要介绍了 D3 在数据加载、转换、前期探索与测量环节中的具体用法及相关注意事项。文章通过大量生动形象的精美截图，帮助 D3 初学者快速上手特定写法，实为入局 D3.js 这一数据可视化工具的不二之选，强烈建议收藏。

本篇为《D3.js in Action》最新第三版3.1小节内容，主要介绍了数据可视化常见的数据类型，配合大量的示例及精美插图，可以很清晰的理解常见的可视化数据类型。感兴趣的朋友可以先收藏一波，以备不时之需。

本篇主要介绍了利用 D3 设置与修改元素样式的具体方法及注意事项。手把手式的教学配上做工精美的示意图，这是我见过的最用心最接地气的 D3 入门资料了，没有之一。本篇为《D3.js in Action》最新第三版第二章最后一节内容，正文过后是一篇对可视化专家的人物专访，方便初学者们了解他们的成长经历及当中的经验教训，可读性极强。强烈建议 D3 爱好者收藏。

本篇为《D3.js in Action》全新第三版第 2.5 小节内容，详细介绍了利用 D3 设置和修改页面元素属性的方法及注意事项。最大特色在于图文并茂，讲解细致，对 D3 可视化初学者十分友好，强烈建议先行收藏，然后在本地边学边敲代码。

本篇为《D3.js in Action》全新第三版第 2.4 小节内容，详细介绍了利用 D3 向选择集添加元素的方法。本节配有大量做工精美的示意图，手把手教您学会 D3 选择集的操作，强烈建议收藏起来以备后用。

本篇为《D3.js in Action》全新第三版第2.3小节内容，主要介绍了 D3 选择集（selection）的基础操作。最大亮点在于精美的示意图与手把手的实战指导。非常适合初学者上手，建议 D3 爱好者先行收藏。

本篇为《D3.js in Action》最新第三版第二章2.1+2.2小节内容。主要介绍了本章的主要任务——绘制一个条形图。然后介绍了本地开发环境的搭建及 D3 的加载方法。建议先行收藏，然后跟着书中步骤在本地实践一下。

本篇为《D3.js in Action》全新第三版第 1.3 小节的后半部分，是正文内容后作者对两位数据可视化资深从业者的人物专访记录。里面提到了很多关于 D3 的学习方法与实践过程。最后对第一章所有内容要点进行了梳理。参考性和可读性俱佳，建议收藏。

本篇为《D3.js in Action》全新第三版第 1.3 小节内容的正文部分，主要介绍了 D3 视角下的数据可视化最佳实践，并列出了作者认为对夯实可视化基础特别有帮助的业内经典著作书单。建议 D3 及数据可视化爱好者收藏。

本篇为《D3.js in Action》全新第三版第 1.2 小节的内容收尾部分，主要介绍了与 D3 项目构建相关的一些知识，包括 Node.js、主流 JavaScript 框架及 Observable 平台相关的情况。可以作为扩充知识面的阅读材料。建议多尝试 Observable 线上项目。

本篇为《D3.js in Action》全新第三版第一章1.2.5小节内容，主要介绍了与 D3.js 相关的 JavaScript 基础知识，重点讲解了 JS 中的方法链式调用以及数组对象的常见接口方法，如 forEach、map、filter、find 等。

本篇主要介绍了后续构建 D3 项目所需掌握的基础知识点，包括 Canvas、WebGL 的知识，并简要介绍了 CSS 层叠相关的知识点。虽然没有上一节 SVG 的知识点密集，但也不要掉以轻心。夯实基础才能行稳致远。

本篇为《D3.js in Action》全新第三版第一章1.2.2 SVG 基础知识的最后一部分内容。通过大量精美的示意图和详细的示例代码，分别介绍了圆、椭圆、路径、文本以及分组元素相关的核心基础知识。值得 D3 及 SVG 爱好者收藏。

本篇为《D3.js in Action》最新第三版中第一章1.2.2小节 SVG 基础知识的第二部分。主要介绍了 SVG 的坐标系、直线及矩形元素的绘制与注意事项。利用大量精美直观的示意图，手把手带领读者熟悉 SVG，非常值得收藏。

本篇为《D3.js in Action》最新第三版1.2.2小节的第一部分译文。通过手把手的指导与示意图，带领读者一步步揭开 SVG 图形的神秘面纱。

本节为《D3.js in Action》最新第三版第一章1.2小节的前两部分的相关内容。主要介绍了 HTML、DOM 及 SVG 的一些知识，并给出了随书代码的使用方法，强烈建议跟随书中内容边学变敲一遍代码。

本篇为《D3.js in Action》最新第三版中第一章1.1.3小节的内容。文章通过详细论述和生动形象的图表，充分展示了 D3.js 的工作原理，以及利用 D3 进行数据可视化开发的通用流程。最后还附上了对前两版作者 Elijah Meeks 的访谈内容。对于 D3 的学习非常有帮助。

本节为《D3.js in Action》最新第三版的1.1.2小节内容。具体介绍了 D3.js 的具体适用场景以及与市面上一些常见绘图工具的对比。

本篇介绍了《D3.js in Action》最新第三版的第一部分、第一章1.1小节。主要内容是对 D3.js 这一强大的 JavaScript 数据可视化工具库进行了简单介绍，并对比了 D3 与其他同类别工具库的主要特色与亮点。

本文为《D3.js 实战》最新第三版的“关于本文”完整译文。主要介绍了本书面向的主要读者群体、内容上的组织架构、源代码相关约定以及 liveBook 线上论坛的概括介绍。对于了解整本书的内容及注意事项具有一定的参考价值。

本文为《D3.js 实战》最新第三版的前言内容。介绍了作者的学习经历和创作背景。

本文为《D3.js 实战》最新第三版的推荐序内容译文。介绍了数据可视化的行业背景、未来趋势以及本书的主要亮点。