实验目的：

熟悉 D3 数据可视化的使用方法。

实验原理：

D3 的全称是（Data-Driven Documents），是一个被数据驱动的文档，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。本次实践主要介绍D3一些最基本的使用方法，以及生成一些比较简单的图表。

D3 是一个 JavaScript 函数库。它只有一个文件，在 HTML 中引用即可。有两种方法：（1）下载 D3.js 的文件，解压后，在 HTML 文件中包含相关的 js 文件即可。（2）还可以直接包含网络的链接，这种方法较简单：<script src="http://d3js.org/d3.v3.min.js"charset="utf-8"></script> 但使用的时候要保持网络连接有效，不能再断网的情况下使用。D3 可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对），可以处理 JSON 和 GeoJSON。

实验环境：

IE9 以上或 Firefox 或 Chrome（推荐）等浏览器、Notepad++等编辑工具。D3.js库。

实验步骤：

题目一：制作一个简单的柱形图。

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

<html>

<head>

    <meta charset="utf-8">

    <title>完整的柱形图</title>

    <style>

        /* 设置柱形图的颜色 */

        .MyRect {

            fill: green; /* 修改颜色为绿色 */

        }

        /* 设置文字的样式 */

        .MyText {

            font-size: 12px;

            text-anchor: middle;

            fill: blue; /* 文字颜色为蓝色 */

        }

        /* 设置坐标轴的样式 */

        .axis path,

        .axis line {

            fill: none;

            stroke: black;

            shape-rendering: crispEdges;

        }

        .axis text {

            font-family: sans-serif;

            font-size: 11px;

        }

    </style>

</head>

2、添加 SVG 画布。

要绘图，首要需要的是一块绘图的“画布”。HTML5 提供两种强有力的“画布”：SVG 和 Canvas。

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。

D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。在 body 标签中加入代码。

<body>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script>

        // 画布大小

        var width = 400;

        var height = 400;

        // 在 body 里添加一个 SVG 画布

        var svg = d3.select("body")

            .append("svg")

            .attr("width", width)

            .attr("height", height);

        // 画布周边的空白

        var padding = {left: 30, right: 30, top: 20, bottom: 20};

3、定义数据和比例尺

在添加画布的代码后面加入以下代码。

        // 定义一个数组

        var dataset = [16, 23, 54, 46, 33, 24, 19, 37, 9];

        // x 轴的比例尺

        var xScale = d3.scale.ordinal()

            .domain(d3.range(dataset.length))

            .rangeRoundBands([0, width - padding.left - padding.right], 0.1);

        // y 轴的比例尺

        var yScale = d3.scale.linear()

            .domain([0, d3.max(dataset)])

            .range([height - padding.top - padding.bottom, 0]);

4、定义坐标轴

        // 定义 x 轴

        var xAxis = d3.svg.axis()

            .scale(xScale)

            .orient("bottom");

        // 定义 y 轴

        var yAxis = d3.svg.axis()

            .scale(yScale)

            .orient("left");

5、添加矩形和文字元素

        // 添加矩形元素

        var rects = svg.selectAll(".MyRect")

            .data(dataset)

            .enter()

            .append("rect")

            .attr("class", "MyRect")

            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")

            .attr("x", function(d, i) {

                return xScale(i) + rectPadding / 2;

            })

            .attr("y", function(d) {

                return yScale(d);

            })

            .attr("width", xScale.rangeBand() - rectPadding)

            .attr("height", function(d) {

                return height - padding.top - padding.bottom - yScale(d);

            });

            // 添加文字元素

        var texts = svg.selectAll(".MyText")

            .data(dataset)

            .enter()

            .append("text")

            .attr("class", "MyText")

            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")

            .attr("x", function(d, i) {

                return xScale(i) + rectPadding / 2;

            })

            .attr("y", function(d) {

                return yScale(d);

            })

            .attr("dx", function() {

                return (xScale.rangeBand() - rectPadding) / 2;

            })

            .attr("dy", function(d) {

                return 20;

            })

            .text(function(d) {

                return d;

            });

6.添加坐标轴的元素

        // 添加 x 轴

        svg.append("g")

            .attr("class", "axis")

            .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")

            .call(xAxis);

        // 添加 y 轴

        svg.append("g")

            .attr("class", "axis")

            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")

            .call(yAxis);

    </script>

</body>

</html>

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

题目二：制作动态的柱形图

D3 提供了 4 个方法用于实现图形的过渡：

1) transition()启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）。D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。

2) duration()指定过渡的持续时间，单位为毫秒。如 duration(3000)，指持续 3秒。

3) ease()指定过渡的方式，常用的有：linear：普通的线性变化；circle：慢慢地到达变换的最终状态；elastic：带有弹跳的到达最终状态；bounce：在最终状态处弹跳几次。

4) delay()指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。

下面我们将在题目一完成的柱形图的基础上稍作修改，做成一个带动态效果的柱形图。把题目一中添加矩形元素和添加文字元素的代码换成如下代码，就可以启动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。

        // 添加矩形元素

        var rects = svg.selectAll(".MyRect")

            .data(dataset)

            .enter()

            .append("rect")

            .attr("class", "MyRect")

            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")

            .attr("x", function(d, i) {

                return xScale(i) + rectPadding / 2;

            })

            .attr("width",xScale.rangeBand() - rectPadding)

            .attr("y", function(d) {

                var min = yScale.domain()[0];

                return yScale(min);

            })

            .attr("height", function(d) {

                return 0;

            });

            .transition()

            .delay(function(d,i){

                return i * 200;

            })

            .duration(2000)

            .ease("bounce")

            .attr("y",function(d){

                return yScale(d);

            })

            .attr("height",function(d){

                return height - padding.top - padding.bottom - yScale(d);

            });

            // 添加文字元素

        var texts = svg.selectAll(".MyText")

            .data(dataset)

            .enter()

            .append("text")

            .attr("class", "MyText")

            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")

            .attr("x", function(d, i) {

                return xScale(i) + rectPadding / 2;

            })

            .attr("dx", function() {

                return (xScale.rangeBand() - rectPadding) / 2;

            })

            .attr("dy", function(d) {

                return 20;

            })

            .text(function(d) {

                return d;

            });

            .attr("y", function(d) {

                var min = yScale.domain()[0];

                return yScale(min);

            })

            .transition()

            .delay(function(d,i){

                return i * 200;

            })

            .duration(2000)

            .ease("bounce")

            .attr("y",function(d){

                return yScale(d);

            })

可运行程序，结果如下所示：

题目三：制作饼形图。

布局是 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)。

<html>

   <head>

        <meta charset="utf-8">

        <title>饼状图</title>

   </head>
</style>


</style>

<body>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script>

        // 画布大小

        var width = 400;

        var height = 400;

        // 数据集

        var dataset = [11, 6, 34, 27, 13, 9];

        // 创建 SVG 画布

        var svg = d3.select("body")

            .append("svg")

            .attr("width", width)

            .attr("height", height);

        // 定义一个布局

        var pie = d3.layout.pie();

        var piedata = pie(dataset);

首先定义一个布局，返回值赋給变量 pie，此时 pie 可以当做函数使用，接着将数组 dataset 作为 pie()的参数，返回值给 piedata。

2、绘制图形

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

        // 定义弧生成器

        var outerRadius = 150; // 外半径

        var innerRadius = 0; // 内半径，为 0 则中间没有空白

        var arc = d3.svg.arc()

            .innerRadius(innerRadius)

            .outerRadius(outerRadius);

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

        // 添加分组元素，每个分组对应一段弧

        var arcs = svg.selectAll("g")

            .data(piedata)

            .enter()

            .append("g")

            .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

        // 添加路径元素，绘制弧

        arcs.append("path")

            .attr("fill", function(d, i) {

                return color(i); // 根据索引设置颜色

            })

            .attr("d", function(d) {

                return arc(d); // 使用弧生成器生成路径

            })

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

            .outerRadius(outerRadius);

        // 定义颜色比例尺

        var color = d3.scale.category10();

        var arcs = svg.selectAll("g")

然后在每一个弧线中心添加文本。运行结果如下：

        // 添加文本元素，显示数据值

        arcs.append("text")

            .attr("transform", function(d) {

                return "translate(" + arc.centroid(d) + ")"; // 将文本定位到弧的中心

            })

            .attr("text-anchor", "middle")

            .text(function(d) {

                return d.data; // 显示数据值

            });

        // 打印数据集和转换后的数据到控制台

        console.log("原始数据集:", dataset);

        console.log("转换后的数据:", piedata);

    </script>

</body>

</html>

题目四：制作交互式的饼形图。

交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种：鼠标、键盘、触屏。在 D3 中，每一个选择集都有 on()函数，用于添加事件监听器。 on()的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：

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

mouseover - 光标放在某元素上。

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

mousemove - 鼠标被移动的时候。

mousedown - 鼠标按钮被按下。

mouseup - 鼠标按钮被松开。

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

        // 添加路径元素，绘制弧

        arcs.append("path")

            .attr("fill", function(d, i) {

                return color(i); // 根据索引设置颜色

            })

            .attr("d", function(d) {

                return arc(d); // 使用弧生成器生成路径

            })

            .on("mouseover", function(d, i) {

                             d3.select(this)

            .attr("fill", "yellow"); // 鼠标悬停时变为黄色

            })

            .on("mouseout", function(d, i) {

                d3.select(this)

            .transition()

            .duration(500)

            .attr("fill", color(i)); // 鼠标移出时恢复原色

            });

运行结果为：

实验心得：

通过本次实验，熟练的掌握了D3数据可视化的使用方法，通过在使用Notepad++软件，来编写和运行代码。在使用Notepad++软件的途中，学习到了在运行代码之时，要将文件先保存为.html文件形式，这样才可以使用浏览器来得出相关数据图。通过实验，我熟练掌握了D3的基本使用方法。从创建SVG画布，到定义数据和比例尺，再到添加各种图形元素和坐标轴，每一个步骤都让我对D3的工作原理有了更清晰的认识。在制作柱形图时，我学会了利用比例尺将数据映射到合适的图形尺寸，通过调整坐标轴样式和图形颜色，使图表更加美观和易读。这让我意识到，数据可视化不仅仅是将数据呈现出来，更重要的是如何以一种直观、有效的方式展示数据，帮助用户更好地理解数据背后的信息。制作动态柱形图的过程让我对D3的过渡效果有了深刻的理解。通过transition()、duration()、ease()和delay()等方法，能够实现图形的动态变化，使图表更加生动有趣，这种动态效果增加了图表的观赏性，突出了数据的变化趋势。饼形图的制作让我接触到了D3中的布局概念。布局的作用是将原始数据转换为适合绘图的数据格式，这使得复杂图形的绘制变得更加容易。在制作饼形图时，通过d3.layout.pie()定义布局，利用弧生成器绘制饼图的每一部分，并学会了添加文本标签和颜色比例尺，使饼图更加完整和直观。这让我认识到，合理运用布局和生成器可以大大简化复杂图形的绘制过程，提高开发效率。交互式饼形图的制作则让我体验到了D3的交互功能的强大。通过on()函数添加事件监听器，我能够实现鼠标悬停和移出时图形颜色的变化，增强了用户与图表的交互性。这种交互性可以让用户更加深入地探索数据，发现数据中的隐藏信息。在实际项目中，交互功能可以提升用户体验，使数据可视化更加实用和高效。然而，在实验过程中我也遇到了一些问题。例如，在调整图形样式和位置时，由于对D3的属性和方法理解不够深入，导致出现了一些布局错乱的情况。在处理复杂数据和图形时，性能问题也逐渐显现出来。通过查阅资料和不断调试，我逐渐解决了这些问题，这也让我明白在学习和实践过程中，遇到问题并不可怕，关键是要学会如何分析和解决问题。总的来说，这次实验让我对D3数据可视化有了全面的认识和掌握。

实验二：D3数据可视化基础的更多相关文章

Python数据可视化基础讲解
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:爱数据学习社首先,要知道我们用哪些库来画图? matplotlib ...
数据可视化基础专题（十二）：Matplotlib 基础（四）常用图表（二）气泡图、堆叠图、雷达图、饼图、
1 气泡图气泡图和上面的散点图非常类似,只是点的大小不一样,而且是通过参数 s 来进行控制的,多的不说,还是看个示例: 例子一: import matplotlib.pyplot as plt im ...
数据可视化基础专题（三）：Pandas基础（二） csv导入与导出
1.csv导入 1.1 csv导入 .read_csv()函数 pandas.read_csv(filepath_or_buffer: Union[str, pathlib.Path, IO[~Any ...
数据可视化基础专题（二）：Pandas基础（一） excel导入与导出
1.Excel 1.1 Excel导入 read_excel() pandas.read_excel(io, sheet_name=0, header=0, names=None, index_col ...
数据可视化基础专题（十）：Matplotlib 基础（二）自定义配置文件和绘图风格（rcParams和style）
https://matplotlib.org/api/rcsetup_api.html#module-matplotlib.rcsetup 一.什么是rcParams?我们在使用matplotlibl ...
数据可视化基础专题（十五）：pyecharts 基础（二）flask 框架整合
Flask 前后端分离 Step 1: 新建一个 Flask 项目 $ mkdir pyecharts-flask-demo $ cd pyecharts-flask-demo $ mkdir tem ...
D3 数据可视化实战笔记
学习真是件奇妙的事情.这本书我之前都看过,有些的知识点却完全没有印象. 总结:把用到的知识好好研究:平时可以了解其他技术的基础,把相关的资料和难点记录下来. javascript陷阱 1.变量类型 v ...
数据可视化基础专题（五）：Pandas基础（四）生成对象
引言先介绍下 Pandas 的数据结构,毕竟数据结构是万物的基础. Pandas 有两种主要的数据结构: Series 和 DataFrame 模块导入首先我们在代码中引入 Pandas 和 Nu ...
数据可视化基础专题（十三）：Matplotlib 基础（五）常用图表（三）环形图、热力图、直方图
环形图环形图其实是另一种饼图,使用的还是上面的 pie() 这个方法,这里只需要设置一下参数 wedgeprops 即可. 例子一: import matplotlib.pyplot as plt ...
【笔记】matplotilb数据可视化基础
matplotilb基础 matplotilb是我们使用的一个基础的可视化方法一般来说,使用matplotilb是较为专业的绘制图形的选择不需要很专业的时候可以只是用matplotilb的子模块p ...

随机推荐

Qt编写物联网管理平台41-自动清理早期数据
一.前言随着时间的增加,存储的历史记录也在不断增加,如果设备数量很多,存储间隔很短,不用多久,数据库中的记录就非常多,至少是百万级别起步,而且有些用户还是需要存储每一次的采集的数据,这数据量别说一年 ...
MIPI/LVDS/PCIE/HDMI 设计规范
参考链接: 1.MIPI/LVDS/PCIE/HDMI 2.接口简介(HDMI .eDP/DP.LVDS.VGA.YPbPr.DVI.MHL.MIPI-DSI.VbyOneHS) 3.干货 | 带 ...
IDEA导入他人的项目时提示“project sdk is not defined”的解决办法
IDEA导入他人的项目时提示"project sdk is not defined"的解决办法 1.在IDEA中,在有问题的项目上单击鼠标右键,然后选择"Open Mod ...
利用idea开发环境进行Spring Boot开发时maven同步更新jar依赖包时提示：sync:Cannot resolve xxx 的解决方案
idea maven sync Cannot resolve xxx 的解决方案经常会出现这种奇葩情况,提示找不到包其实是因为网络波动或者突然断掉,导致包更新出现问题直接去maven的仓库目录 ...
不为人知的网络编程(十五)：深入操作系统，一文搞懂Socket到底是什么
1.引言我相信大家刚开始学网络编程中socket的时候,都跟我一样对书上所讲的socket概念云里雾里的.似懂非懂,很是困扰. 这篇文章我打算从初学者的角度,用通俗易懂的文字,跟大家分享下我所理解的 ...
pytorch模型降低计算成本和计算量
下面是如何使用PyTorch降低计算成本和计算量的一些方法: 压缩模型:使用模型压缩技术,如剪枝.量化和哈希等方法,来减小模型的大小和复杂度,从而降低计算量和运行成本. 分布式训练:使用多台机器进行分 ...
Java 中toString方法在枚举中的应用：展示枚举字段信息
在Java编程中,枚举(enum)是一种特殊的数据类型,它允许程序员定义一组固定的常量.枚举类型在Java中非常有用,尤其是在需要表示一组固定选项(如星期.月份.方向等)时.尽管枚举类型在定义时看起来 ...
新一代python版本与依赖管理工具 uv
uv python版本与依赖管理选择原因 1. 新的好玩.rust开发的执行速度快 2. 确实方便 3. 轻,软件就十几二十兆,占磁盘小 4. uv.lock可以锁版本场景应用场景一从 ana ...
bazel学习
bazel学习 a fast, scalable, multi-language and extensible build system bazel就是一个编译打包工具,类似于make.cmake等 ...
SQL server 更改计算机名后造成未找到或无法访问服务器解决方法
默认的计算机名较长且不易辨识,我在更改完计算机名之后却发现每次登陆SQL server都需要更改计算机名并重启计算机,否则便会出现以下错误提示: 此时我们需要再次更改计算机名(最终你想给计算机起的名字 ...

实验二：D3数据可视化基础