D3数据可视化基础

在数据驱动的时代，数据可视化已成为传递信息、揭示规律的重要手段。而 D3.js（Data-Driven Documents）作为一款强大的 JavaScript 库，正以其灵活性和创造性，成为数据可视化领域的明星工具。本文将带你走进 D3 的世界，从零开始学习如何用代码绘制数据的艺术。

一， D3 是什么？

D3 是一个基于 Web 标准（HTML、CSS、SVG）的 JavaScript 库，它允许你将数据绑定到 DOM 元素，并通过数据驱动的方式动态地操作文档。简单来说，D3 可以帮助你：

将数据转换为图形： 从简单的柱状图到复杂的关系网络图，D3 都能轻松驾驭。

实现交互式可视化： 通过鼠标悬停、点击等事件，让用户与数据进行互动。

创建动态可视化： 利用动画和过渡效果，让数据随时间变化而动态呈现。

二， 为什么选择 D3？

功能强大： D3 提供了丰富的 API，可以满足各种数据可视化需求。

灵活可控： 你可以完全控制图表的每一个细节，实现高度定制化的可视化效果。

社区活跃： D3 拥有庞大的用户社区和丰富的学习资源，方便学习和交流。

三，实验

D3，全称 Data-Driven Documents（数据驱动文档），是一个基于 JavaScript 的函数库，主要用于数据可视化。它通过将数据与文档对象模型（DOM）绑定，使开发者能够以数据驱动的方式动态生成和操作网页内容。本次实践将介绍 D3 的基本使用方法，并演示如何生成一些简单的图表。

（1）下载 D3.js 的文件，解压后，在 HTML 文件中包含相关的 js 文件即可。

（2）还可以直接包含网络的链接，这种方法较简单： 但使用的时候要保持网络连接有效，不能再断网的情况下使用。

D3 可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值 对），可以处理 JSON 和 GeoJSON

1.制作一个简单的柱形图

打开Notepad++，新建文件，并编辑好html框架。

 

在 D3 中，绘制图表的第一步是创建一块“画布”。HTML5 提供了两种强大的绘图工具：SVG 和 Canvas。虽然 D3 并未强制规定必须使用 SVG，但由于 D3 提供了大量专门针对 SVG 的图形生成器，因此 SVG 是 D3 数据可视化的首选画布。

SVG（可缩放矢量图形）：SVG 是一种基于 XML 的矢量图形格式，用于描述二维图形。

      优点：文本支持：SVG 支持直接在图形中添加文本。

                 支持交互：可以通过 CSS 和 JavaScript 直接操作 SVG 元素。

                 矢量图形：缩放时不会失真，适合高分辨率显示。缺点：对于非常复杂的图形，渲染性能可能不如 Canvas。

Canvas：Canvas 是一个基于像素的绘图区域，通过 JavaScript 动态生成 2D 图形。

     优点：高性能：适合渲染大量图形或复杂动画。

     缺点：不支持交互：Canvas 绘制的图形是一个整体，无法单独操作其中的元素。

               不支持矢量图形：缩放时会出现失真。

定义数据和比例尺。

添加矩形和文字元素。

添加坐标轴的元素。

最后运行结果如下图所示。

2.制作动态的柱形图

D3 提供了强大的过渡（transition）功能，可以让图表的变化更加平滑和生动。通过使用 transition()、duration()、ease() 和 delay() 方法，我们可以为柱形图添加动态效果，使柱形和文字缓慢升至目标高度，并在目标处跳动几次。

（1）transition()

    启动过渡效果，定义图形从初始状态到目标状态的变化过程。

    D3 会自动对颜色、位置、大小等属性进行插值计算，实现平滑过渡。

（2）duration()

    指定过渡的持续时间，单位为毫秒。

    例如，duration(3000) 表示过渡持续 3 秒。

（3）ease()

     指定过渡的方式，常用的选项包括：

   linear：线性变化。

   circle：缓慢到达最终状态。

   elastic：带有弹跳效果到达最终状态。

   bounce：在最终状态处弹跳几次

（4）delay()

    指定延迟时间，表示一定时间后才开始过渡，单位为毫秒。

    可以对整体或个别元素设置延迟。

将代码调整为以下这样

结果如图所示 

3.制作饼图

布局是 D3 中一个十分重要的概念。布局的作用是：将不适合用于绘图的数据转 换成了适合用于绘图的数据。 D3 总共 提供 了 12 个布 局： 饼状 图（ Pie）、 力导 向图 （ Force ）、 弦图 （Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图 （Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图 （Treemap）、层级图（Hierarchy）。 12 个布局中，层级图（Hierarchy）不能直接 使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。这些布 局的作用都是将某种数据转换成有利于可视化的另一种数据。 在布局的应用中，最简单的就是饼状图。

（1）定义一个饼状图布局 定义布局的代码为：var pie = d3.layout.pie()；此时 pie 可以当做函数使用。然后 将数组 dataset（里面是要可视化的数据）作为 pie()的参数，返回值 piedata 就是转换 后的数据。var piedata = pie(dataset) 

（2）绘制图形 SVG 有一个叫做路径 的元素，它可以结合使用直线，曲线等来制作各种 不规则的复杂的图形。通过布局转换后的数据 piedata 很难计算得到路径值。为此， 我们需要用到生成器。 这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一 段弧。

 

弧生成器返回的结果赋值给 arc。arc 可以当做一个函数使用，把 piedata 作为参 数传入，即可得到路径值。 接下来，在 里添加分组元素（g），每一个分组用于存放一段弧的相关元 素。再对每个 元素，添加 。

定义颜色比例尺。color 是一个颜色比例尺，它能根据传入的索引号获取相应的 21 颜色值。

运行结果如下：

4.绘制交互性的饼形图

交互是数据可视化中不可或缺的一部分，它能够使图表更加生动，并展示更多信息。通过交互，用户可以与图表进行互动，例如拖动图形、鼠标悬停显示提示框、放大或缩小图表等。D3 提供了强大的交互功能，允许开发者轻松地为图表添加事件监听器。

用户用于交互的工具主要有以下三种：

1. 鼠标：最常见的交互工具，支持点击、悬停、拖动等操作。

2. 键盘：通过按键触发事件，例如按下空格键暂停动画。

3. 触屏：在移动设备上，支持触摸、滑动、缩放等操作

在 D3 中，每个选择集都有一个 on() 函数，用于添加事件监听器。

    eventName：要监听的事件名称（如 click、mouseover 等）。

           callbackFunction：事件触发时执行的回调函数

以下是一些常用的鼠标事件及其用途：

  click - 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。

  mouseover - 光标放在某元素上。

  mouseout - 光标从某元素上移出来时。

  mousemove - 鼠标被移动的时候。

  mousedown - 鼠标按钮被按下。

  mouseup - 鼠标按钮被松开。 

下面开始进行简单的交互式饼形图制作，目标是在上面的饼形图的基础上加入 mouseover 和 mouseout 事件，mouseover 某部分时变换成黄色，mouseout 时恢复原 色。结果如图

 三，总结

本次通过四个题目，逐步学习了如何使用 D3.js 制作静态和动态的柱形图、饼图，以及如何为图表添加交互效果。

简单的柱状图：

1. SVG 画布：                                                                                                                                  使用 <svg> 元素作为绘图区域，SVG 是 D3 推荐的画布类型，支持矢量图形和交互操作。                                                                                                                                                通过 d3.select("body").append("svg") 创建 SVG 画布，并设置宽度和高度。

2. 定义数据和比例尺：                                                                                                                     使用 d3.scale.linear() 定义 y 轴比例尺，用于映射连续数据（如数值）。                           使用 d3.scale.ordinal() 定义 x 轴比例尺，用于映射离散数据（如类别）。
3. 绘制矩形和文字：                                                                                                                        使用 svg.selectAll("text") 添加文字标签，显示每个柱形的数值。                                      使用 svg.selectAll("rect") 绑定数据，并通过 .enter().append("rect") 创建矩形
4. 添加坐标轴：                                                                                                                               使用 d3.svg.axis() 创建坐标轴，并通过 .call() 方法将坐标轴添加到画布中。

动态柱状图：

    过渡效果：

1. 使用 transition() 启动过渡效果，使柱形图和文字从初始状态平滑过渡到目标状态。
2. 使用 duration() 设置过渡持续时间，ease() 设置过渡方式（如 bounce 弹跳效果）。
3. 使用 delay() 设置延迟时间，使每个柱形依次启动。

   动态效果 ：

      柱形图和文字从底部缓慢升起，并在目标位置弹跳几次，增加动态感和趣味性。

制作饼图：

1. 饼图布局：

   • 使用 d3.layout.pie() 定义饼图布局，将原始数据转换为适合绘图的格式。

   • 通过 pie(dataset) 生成饼图数据，每个数据点包含起始角度和结束角度。

2. 弧生成器：

   • 使用 d3.svg.arc() 创建弧生成器，生成饼图每个扇区的路径。

   • 设置 innerRadius 和 outerRadius 控制饼图的内外半径。

3. 绘制饼图：

   • 使用 <path> 元素绘制每个扇区，并通过颜色比例尺 d3.scale.category10() 为扇区分配颜色。

   • 在扇区中心添加文字标签，显示数据值。

制作交互式饼图 ：

1. 交互事件：

   • 使用 on() 函数为饼图添加事件监听器，支持 mouseover 和 mouseout 事件。

   • 当鼠标悬停在扇区上时，扇区颜色变为黄色，并显示提示框。

   • 当鼠标移出时，扇区恢复原始颜色，并隐藏提示框。

2. 提示框：

       使用 CSS 定义提示框样式，并通过 d3.select(".tooltip") 动态更新提示框内容和位置。

3. ​​​​​​​动态效果：

      通过 transition() 实现扇区颜色的平滑过渡，提升用户体验。

D3.js 是一个功能强大且灵活的数据可视化工具，适合从简单的柱形图到复杂的交互式图表。