D3数据可视化基础

D3 总共提供了12个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。SVG 有一个叫做路径的元素，它可以结合使用直线，曲线等来制作各种不规则的复杂的

2301_79714324

804人浏览 · 2025-03-17 20:34:38

2301_79714324 · 2025-03-17 20:34:38 发布

一、实验目的

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

二、实验原理

D3的全称是（Data-DrivenDocuments），是一个被数据驱动的文档，其实就是
一个JavaScript的函数库，使用它主要是用来做数据可视化的。本次实践主要介绍
D3一些最基本的使用方法，以及生成一些比较简单的图表。
D3是一个JavaScript函数库。它只有一个文件，在HTML中引用即可。有两种
方法：
（1）下载D3.js的文件，解压后，在HTML文件中包含相关的js文件即可。
（2）还可以直接包含网络的链接，这种方法较简单：
<scriptsrc="http://d3js.org/d3.v3.min.js"charset=“utf-8”>
但使用的时候要保持网络连接有效，不能再断网的情况下使用。
D3可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值
对），可以处理JSON和GeoJSON

三、实验环境

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

四、实验步骤

（一）制作一个简单的柱形图

1、打开Notepad++，新建文件，并编辑好html框架。代码如下：

<html>
<head>
    <meta charset="UTF-8">
    <title>完整的柱形图</title>
    <style>
	    .MyRect {
            fill: skyblue; /* 设置矩形的填充颜色为蓝色 */
        }
    </style>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
    </script>
</body>
</html>

2、添加SVG画布。
要绘图，首要需要的是一块绘图的“画布”。HTML5提供两种强有力的“画布”：SVG和Canvas。
SVG，指可缩放矢量图形（ScalableVector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG使用XML格式来定义图形，除了IE8之前的版本外，绝大部分浏览器都支持SVG，可将SVG文本直接嵌入HTML中显示。Canvas 是通过JavaScript 来绘制2D图形，是HTML5中新增的元素。D3 虽然没有明文规定一定要在SVG中绘图，但是D3提供了众多的SVG图形的生成器，它们都是只支持SVG的。因此，建议使用SVG画布。
在body标签中加入如下代码

	   // 画布尺寸配置
    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 
    };
    //定义一个数组
    var dataset = [16,23,54,46,33,24,19,37,9];

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]);

    //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 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;
        });

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);

结果如下：

（二）制作动态的柱形图
D3 提供了4个方法用于实现图形的过渡：
（1） transition()启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）。D3会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。
（2）duration()指定过渡的持续时间，单位为毫秒。如duration(3000)，指持续 3秒。
（3）ease()指定过渡的方式，常用的有：linear：普通的线性变化；circle：慢慢地到达变换的最终状态elastic：带有弹跳的到达最终状态；bounce：在最终状态处弹跳几次。
（4）delay()指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
下面我们将在前面基础上完成的柱形图的基础上稍作修改，做成一个带动态效果的柱形图。把（一）中添加矩形元素和添加文字元素的代码换成如下代码，就可以启动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。

（三）制作饼形图
布局是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);
    });

然后在每一个弧线中心添加文本

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);

运行结果如下：

（四）制作交互式的饼形图
交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种：鼠标、键盘、触屏。
在D3中，每一个选择集都有on()函数，用于添加事件监听器。on()的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：
click- 鼠标单击某元素时，相当于mousedown和mouseup组合在一起。
mouseover- 光标放在某元素上。
mouseout- 光标从某元素上移出来时。
mousemove- 鼠标被移动的时候。
mousedown- 鼠标按钮被按下。
mouseup- 鼠标按钮被松开。
下面开始进行简单的交互式饼形图制作，目标是在上面的饼形图的基础上加入mouseover 和 mouseout 事件，mouseover 某部分时变换成黄色，mouseout时恢复原色。在代码中加入如下代码。