数据可视化基础实验：D3数据可视化基础
一、引言与实验原理
D3 的全称是（Data-Driven Documents），是一个被数据驱动的文档，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。本次实践主要介绍D3 一些最基本的使用方法，以及生成一些比较简单的图表。
D3 是一个 JavaScript 函数库。它只有一个文件，在 HTML 中引用即可。有两种方法：
（1）下载 D3.js 的文件，解压后，在 HTML 文件中包含相关的 js 文件即可。
（2）还可以直接包含网络的链接，这种方法较简单：
但使用的时候要保持网络连接有效，不能再断网的情况下使用。
D3 可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对），可以处理 JSON 和 GeoJSON。
二、实验目的与实验环境
本实验的主要目的是熟悉 D3 数据可视化的使用方法。
实验的环境要求为：IE9 以上或 Firefox 或 Chrome（推荐）等浏览器、Notepad++等编辑工具、D3.js库。
三、实验步骤
q1.制作一个简单的柱形图
1、打开Notepad++，新建文件，并编辑好html框架。
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 标签中加入代码后。
<html>
<head>
<meta charset="utf-8">
<title>完整的柱形图</title>
</head>
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.is"charset="utf-8"></script>
<script>
//画布大小
vaz width 400;
vaz 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};
</script>
</body>
</html>
3、定义数据与坐标轴。
在添加完画布的代码后就需要为其定义坐标轴、添加矩形和文字元素和添加坐标轴的元素。
首先添加x、y轴的比例尺：
//定义一个数组
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]);
//y轴的比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
随后定义x、y的坐标轴：
//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
在坐标轴内添加文字元素与矩形：
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素
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;
});
最后添加坐标轴的元素：
//添加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);
4、保存html文件并在浏览器中打开
q2.制作动态的柱形图
1、图形过渡的基本原理
D3 提供了4个方法用于实现图形的过渡：
（1） transition()启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）。D3会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。
（2）duration()指定过渡的持续时间，单位为毫秒。如duration(3000)，指持续 3秒。
（3）ease()指定过渡的方式，常用的有：linear：普通的线性变化；circle：慢慢地到达变换的最终状态elastic：带有弹跳的到达最终状态；bounce：在最终状态处弹跳几次。
（4）delay()指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
下面我们将在前面基础上完成的柱形图的基础上稍作修改，做成一个带动态效果的柱形图。把（一）中添加矩形元素和添加文字元素的代码换成如下代码，就可以启动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。
代码示例：
2、运行结果：
q3.制作饼形图
布局是D3中一个十分重要的概念。布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。
D3 总共提供了12个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
12个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。这些布局的作用都是将某种数据转换成有利于可视化的另一种数据。在布局的应用中，最简单的就是饼状图。
1、定义一个饼状图布局
定义布局的代码为：varpie=d3.layout.pie()；此时 pie 可以当做函数使用。然后将数组dataset（里面是要可视化的数据）作为pie()的参数，返回值piedata就是转换后的数据。varpiedata =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];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pie = d3.layout.pie();//定义一个布局，返回值赋给变量pie，此时pie可以当做函数使用
var piedata = pie(dataset);//数组dataset作为pie()的参数，返回值给piedata
</script>
</body>
</html>
2、绘制图形
SVG 有一个叫做路径 的元素，它可以结合使用直线，曲线等来制作各种不规则的复杂的图形。通过布局转换后的数据piedata很难计算得到路径值。为此，我们需要用到生成器。这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一段弧。
var outerRadius = 150; //外半径
var innerRadius = 0; //内半径，为0则中间没有空白
var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius);//设置外半径
弧生成器返回的结果赋值给arc。arc可以当做一个函数使用，把piedata作为参数传入，即可得到路径值。
接下来，在svg里添加分组元素（g），每一个分组用于存放一段弧的相关元素。再对每个 元素，添加 。每一个分组用于存放一段弧的相关元素。再对每个 元素，添加path。
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform", "translate(" + (width/2) + "," + (width/2) + ")");
arcs.append("path")
.attr("fill", function(d, i){
return color(i);
})
.attr("d", function(d){
return arc(d);
});
定义颜色比例尺。color是一个颜色比例尺，它能根据传入的索引号获取相应的颜色值。
color = d3.scale.category10()
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);
2、运行结果
q4.制作交互式的饼形图
交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种：鼠标、键盘、触屏。
在D3中，每一个选择集都有on()函数，用于添加事件监听器。on()的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：
click- 鼠标单击某元素时，相当于mousedown和mouseup组合在一起。
mouseover- 光标放在某元素上。
mouseout- 光标从某元素上移出来时。
mousemove- 鼠标被移动的时候。
mousedown- 鼠标按钮被按下。
mouseup- 鼠标按钮被松开。
下面开始进行简单的交互式饼形图制作，目标是在上面的饼形图的基础上加入mouseover 和 mouseout 事件，mouseover 某部分时变换成黄色，mouseout时恢复原色。在代码中加入如下代码。
.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数据可视化基础实验中，我深入学习了D3.js的基本用法，掌握了如何利用这个强大的JavaScript库进行数据可视化。实验的第一部分让我成功制作了一个简单的柱形图，通过使用SVG画布和定义数据及比例尺的步骤，我体会到了D3.js在图形生成方面的灵活性和便利性。接着，我将柱形图进行了动态效果的增强，学习了如何实现动画效果，使得图表更加生动和吸引人。
在实验的第三部分，我制作了饼形图，学习了如何利用D3的布局功能将数据转化为可视化形式。通过定义饼状图布局和使用弧生成器，我成功绘制了每个数据部分的弧形，并添加了颜色比例尺和文本标签，进一步提升了图表的信息传达能力。最后，我实现了交互式饼形图，通过添加鼠标事件监听器，使得图表在用户操作时能够做出响应，增强了用户体验。
整个实验让我深刻理解了D3.js的强大之处，尤其是在数据驱动文档的理念下，如何将复杂的数据以直观的方式呈现出来。通过不断的实践，我认识到可视化不仅仅是图表的展示，更是数据分析与理解的重要工具。今后，我希望能够继续探索D3.js的更多功能，制作出更加复杂和富有创意的可视化作品。总之，这次实验为我在数据可视化领域的学习奠定了坚实的基础，激励我在未来的学习中不断探索和创新。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
