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

news/2025/3/17 19:41:20/文章来源:https://www.cnblogs.com/szjjhp/p/18776037

实验目的:

  熟悉 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数据可视化有了全面的认识和掌握。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/900525.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCB的通孔、盲孔、埋孔|元器件的符号和封装

他们的本质都是用来切换的层的通孔:从顶层到底层,可以看到头 盲孔:看不到头的,如图从第一层切换到了第二层 埋孔:顾名思义就是埋进去了,无论从正面还是反面都是看不到的,它是处于内层的原理图就是一个表示符号,封装是元器件具体实物大小,具体形状

在IDEA编辑器中,如何在.gitignore 的文件中,把 .ides 的文件忽略,提交git的时候不提交 .idea文件夹

方法 1:直接编辑 .gitignore 文件创建或编辑 .gitignore 文件在项目根目录(与 .git 文件夹同级)右键点击 → New → File,输入文件名 .gitignore。如果已存在 .gitignore,直接双击打开。添加忽略规则在 .gitignore 文件中添加以下内容:# 忽略所有 .idea 目录及其内容 .id…

揭秘EtherCAT转profinet玻璃制造厂的复杂生产环境与智能设备运用

玻璃制造厂的生产环境都比较复杂,需要严格的操作规程,及安全规范。玻璃制造厂的生产环境通常具有以下特点:高温环境:玻璃的熔化过程需要在高温下进行,熔炉的温度通常达到1400℃以上。因此,厂房内的设备和材料必须能够耐高温,并具备良好的隔热性能。 粉尘和化学物质:在玻…

20242943 2024-2025-2 《网络攻防实践》实验三

一.实验内容(1)动手实践了tcpdump等嗅探工具。通过嗅探工具,可以分析进入某一网站时,浏览器访问了多少个web服务器以及它们的IP地址都是什么。(2)动手实践Wireshark等抓包工具。通过使用Wireshark开源软件对在本机上以TELNET方式登录BBS进行嗅探与协议分析,得出了所登录…

20241904 2024-2025-2 《网络攻防实践》实验三

一、.实验内容动手实践tcpdump 使用tcpdump开源软件对在本机上访问www.tianya.cn网站过程进行嗅探,回答问题:在访问www.tianya.cn网站首页时,浏览器将访问多少个Web服务器? 他们的IP地址都是什么?动手实践Wireshark 使用Wireshark开源软件对在本机上以TELNET方式登录BBS进…

context的应用

1. 简介 在 Go 语言中,context 包主要用于在 并发编程 中控制和管理 goroutine 的生命周期。它提供了一种机制,可以通过传递 context.Context 来协调多个 goroutine,特别是在需要取消操作、超时控制和传递共享数据时。 2. 常见用法2.1 控制goroutine的生命周期(cancel) co…

Semantic Kernel:Phi-4 mini的tools

Phi4-mini开始支持tools了,但在第一时间试用时不理想,kenfey最近发了一篇解决方案,详见https://techcommunity.microsoft.com/blog/educatordeveloperblog/building-ai-agents-on-edge-devices-using-ollama--phi-4-mini-function-calling/4391029。本篇文章想更详细地梳理一…

Creo 11下载与安装教程

Creo是一款由PTC(Parametric Technology Corporation)开发的计算机辅助设计(CAD)软件套件。Creo包括多个模块,用于实现产品设计、建模、分析和制造过程中的各个环节。其中,Creo Parametric是其核心组件,提供了参数化建模功能,可以创建几何形状并应用关联参数,使设计过…

局域网下Python oracledb 连接远程服务器 Oracle 11g

Windows 里ipconfig 一下查服务器的IP 我的地址是在这里,F:\app\dell\product\11.2.0\dbhome_1\NETWORK\ADMIN 默认一般是在这里,C:\oracle\product\11.2.0\dbhome_1\network\admin\listener.ora# listener.ora Network Configuration File: F:\app\dell\product\11.2.0\db…

临时表空间满分析

oracle 临时表空间满,业务无法进行,临时表空间快速增长,如何分析,如何预防、如何干预快速处理临时表空间满分析 oracle 临时表空间满,业务无法进行,临时表空间快速增长通过以下方式来分析 分析步骤 1. 查看临时空间占用情况总占用情况select inst_id, username, blocks*8…

Docker镜像和容器管理

1. 镜像管理 1.1 镜像结构和原理镜像即创建容器的模版,含有启动容器所需要的文件系统及所需要的内容,因此镜像主要用于方便和快速的创建并启动容器 镜像含里面是一层层的文件系统,叫做 Union FS(联合文件系统),联合文件系统,可以将几层目录挂载到一起(就像千层饼,洋葱头…