【D3.js - v5.x】（2）绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡

前端修罗场

发布于 2023-10-07 18:59:37

7050

发布于 2023-10-07 18:59:37

文章被收录于专栏：Web 技术

绘图：以柱状图为例

要绘图，首要需要的是一块绘图的“画布”。

HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。

SVG 是什么

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

SVG 有如下特点：

SVG 绘制的是矢量图，因此对图像进行放大不会失真。
基于 XML，可以为每个元素添加 JavaScript 事件处理器。
每个图形均视为对象，更改对象的属性，图形也会改变。
不适合游戏应用。

Canvas

Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。

Canvas 有如下特点：

绘制的是位图，图像放大后会失真；
不支持事件处理器。
能够以 .png 或 .jpg 格式保存图像；
适合游戏应用

添加画布

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

使用 D3 在 body 元素中添加 svg 的代码如下：

var width = 300;  //画布的宽度
var height = 300;   //画布的高度

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

有了画布，接下来就可以在画布上作图了。

绘制矩形

本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴。

在 SVG 中，矩形的元素标签是 rect。例如：

<svg>
<rect></rect>
<rect></rect>
</svg>

上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：

x：矩形左上角的 x 坐标；
y：矩形左上角的 y 坐标；
width：矩形的宽度；
height：矩形的高度；

要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

现在给出一组数据，要对此进行可视化。数据如下：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

为简单起见，我们直接用数值的大小来表示矩形的像素宽度，然后，添加以下代码：

var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：

svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素

这段代码以后会常常出现在 D3 的代码中，请务必牢记。目前不深入讨论它的作用机制是怎样的，只需要读者牢记：

当有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。

添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，前面已经讲过，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。

最后一行的：

.attr("fill","steelblue");

是给矩形元素设置颜色。一般来说，最好写成外置 CSS 的形式，方便归类和修改。

比例尺

比例尺是 D3 中很重要的一个概念，为什么需要比例尺：

上一章制作了一个柱形图，当时有一个数组：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];

绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。

此方式非常具有局限性，如果数值过大或过小，例如：

var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];

对以上两个数组，绝不可能用 2.5 个像素来代表矩形的宽度，那样根本看不见；也不可能用 2500 个像素来代表矩形的宽度，因为画布没有那么长。

于是，我们需要一种计算关系，能够：

将某一区域的值映射到另一区域，其大小关系不变。

这就是比例尺（Scale）。

比例尺，很像数学中的函数。例如，对于一个一元二次函数，有 x 和 y 两个未知数，当 x 的值确定时，y 的值也就确定了。

在数学中，x 的范围被称为定义域，y 的范围被称为值域。

D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。

开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。

D3 提供了多种比例尺，下面介绍最常用的两种。

线性比例尺

线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。

假设有以下数组：

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

现有要求如下：

将 dataset 中最小的值，映射成 0；将最大的值，映射成 300。

代码如下：

var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

其中，d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：

d3.max()
d3.min()

这两个函数能够求数组的最大值和最小值，是 D3 提供的。按照以上代码，

比例尺的定义域 domain 为：[0.9, 3.3]；
比例尺的值域 range 为：[0, 300]

因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。当输入 2.3 时呢？返回 175，这是按照线性函数的规则计算的。

有一点请大家记住：

d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。

序数比例尺

有时候，定义域和值域不一定是连续的。例如，有两个数组：

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

我们希望 0 对应颜色 red，1 对应 blue，依次类推。

但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

用法与线性比例尺是类似的。

给柱形图添加比例尺

<body>
    <script src="d3/d3.js"></script>
    <script>
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度
        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; //数据（表示矩形的宽度）
        var linear = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([0, 250]);
        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        svg.selectAll("rect") //选择svg内所有的矩形
            .data(dataset) //绑定数组
            .enter() //指定选择集的enter部分
            .append("rect") //添加足够数量的矩形元素
            .attr("x",20)
            .attr("y",function(d,i){
                return i * rectHeight;
            })
            .attr("width",function(d){
                return linear(d);   //在这里用比例尺
            })
            .attr("height",rectHeight-2)
            .attr("fill","steelblue");
    </script>
</body>

d3.scaleLinear()

文档：https://www.d3js.org.cn/document/d3-scale/#continuous-scales

坐标轴

坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。**坐标轴在 SVG 中是没有现成的图形元素的，**需要用其他的元素组合构成。

D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。

在 SVG 画布的预定义元素里，有六种基本图形：

矩形
圆形
椭圆
线段
折线
多边形

另外，还有一种比较特殊，也是功能最强的元素：

路径

画布中的所有图形，都是由以上七种元素组成。

显然，这里面没有坐标轴 这种元素。

因此，我们需要**用其他元素来组合成坐标轴，**最终使其变为类似以下的形式：

<g>
<!-- 第一个刻度 -->
<g>
<line></line>   <!-- 第一个刻度的直线 -->
<text></text>   <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line>   <!-- 第二个刻度的直线 -->
<text></text>   <!-- 第二个刻度的文字 -->
</g> 
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

分组元素，是 SVG 画布中的元素，意思是 group。此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。

D3 提供了一个组件：d3-axis。它为我们完成了以上工作。

文档：https://www.d3js.org.cn/document/d3-axis/#installing

上一章提到了比例尺的概念，要生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。

下面，在上一章的数据和比例尺的基础上，添加一个坐标轴的组件。

//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);

var axis = d3.axisBottom() //使用给定的 scale 构建一个刻度在下的坐标轴生成器
     .scale(linear)      //指定比例尺
     .ticks(7);          //指定刻度的数量

在 SVG 中添加坐标轴

定义了坐标轴之后，只需要在 SVG 中添加一个分组元素，再将坐标轴的其他元素添加到这个里即可。代码如下：

svg.append("g")
   .call(axis);

上面有一个 call() 函数，其参数是前面定义的坐标轴 axis。

在 D3 中，call() 的参数是一个函数。调用之后，将当前的选择集作为参数传递给此函数。

也就是说，以下两段代码是相等的。

function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))

等价于：

d3.selectAll("div").call(foo);

设定坐标轴的样式和位置

默认的坐标轴样式不太美观，下面提供一个常见的样式：

<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

分别定义了类 axis 下的 path、line、text 元素的样式。接下来，只需要将坐标轴的类设定为 axis 即可。

坐标轴的位置，可以通过 transform 属性来设定。

通常在添加元素的时候就一并设定，写成如下形式：

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

完成代码：

<body>
    <script src="d3/d3.js"></script>
    <script>
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度

        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; //数据（表示矩形的宽度）
       //定义比例尺
        var linear = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([0, 250]);

        var axis = d3.axisBottom() //使用给定的 scale 构建一个刻度在下的坐标轴生成器
            .scale(linear)      //指定比例尺
            .ticks(7);          //指定刻度的数量

        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        svg.selectAll("rect") //选择svg内所有的矩形
            .data(dataset) //绑定数组
            .enter() //指定选择集的enter部分
            .append("rect") //添加足够数量的矩形元素
            .attr("x",20)
            .attr("y",function(d,i){
                return i * rectHeight;
            })
            .attr("width",function(d){
                return linear(d);   //在这里用比例尺
            })
            .attr("height",rectHeight-2)
            .attr("fill","steelblue");

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(20,130)")
            .call(axis);
    </script>
</body>

完整的柱形图

一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。

<body>
    <div class="MyRect"></div>
    <script src="d3/d3.js"></script>
    <script>
        var width = 500;  //画布的宽度
        var height = 500;   //画布的高度

        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        //画布周边的空白，避免将图形绘制到边界上
        var padding = {left:30, right:30, top:20, bottom:20};

        var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; //数据（表示矩形的宽度）
       //定义x比例尺
        var xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .rangeRound([0, width - padding.left - padding.right]);
        //y轴的比例尺
        var yScale = d3.scaleLinear()
        .domain([0,d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);
        //定义x轴
        var xAxis = d3.axisBottom(xScale) //使用给定的 scale 构建一个刻度在下的坐标轴生成器
        //定义y轴
        var yAxis = d3.axisLeft(yScale)
        //矩形之间的空白
        var rectPadding = 4;   //每个矩形所占的像素高度(包括空白)
        //添加矩形元素
        var rects = svg.selectAll(".MyRect")
            .data(dataset) //绑定数组
            .enter() //指定选择集的enter部分
            .append("rect") //添加足够数量的矩形元素
            .attr("class","MyRect")
            .attr("transform","translate(" + padding.left + "," + padding.top + ")")
            .attr("x",function(d,i){
                return (xScale.bandwidth() + xScale.paddingInner()) * i
            })
            .attr("y",function(d){
                return yScale(d);
            })
            .attr("width",xScale.bandwidth() - rectPadding)
            .attr("height",function(d){
                return height - padding.top - padding.bottom - yScale(d);
            })
            .attr('fill', 'green');
        //添加文字元素
        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.bandwidth() + xScale.paddingInner()) * i
            } )
            .attr("y",function(d){
                return yScale(d);
            })
            .attr("dx",function(){
                return (xScale.bandwidth() - 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);

        svg
        .selectAll('rect')
        .on("mouseover",function(d,i){
          d3.select(this)
            .transition()
            .duration(100)
            .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
          d3.select(this)
            .transition()
            .duration(500)
            .attr("fill","green");
        });
            
    </script>
</body>

D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。

上一章中，柱状图有动态效果，这就是一种动态图表。动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。

例如，有一个圆，圆心为 (100, 100)。现在我们希望圆的 x 坐标从 100 移到 300，并且移动过程在 2 秒的时间内发生。

这种时候就需要用到动态效果，在 D3 里我们称之为过渡（transition）。

实现动态的方法

D3 提供了 4 个方法用于实现图形的过渡：从状态 A 变为状态 B。

transition():启动过渡效果

其前后是图形变化前后的状态（形状、位置、颜色等等），例如：

.attr("fill","red")         //初始颜色为红色
.transition()               //启动过渡
.attr("fill","steelblue")   //终止颜色为铁蓝色

D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。

duration()

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

如 duration(2000) ，指持续 2000 毫秒，即 2 秒。

ease()

指定过渡的方式，常用的有：

linear：普通的线性变化
circle：慢慢地到达变换的最终状态
elastic：带有弹跳的到达最终状态
bounce：在最终状态处弹跳几次

调用时，格式形如： ease(“bounce”)。

delay()

指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。

此函数可以对整体指定延迟，也可以对个别指定延迟。

例如，对整体指定时：

.transition()
.duration(1000)
.delay(500)

图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。过渡的总时长为1500毫秒。

又如，对一个一个的图形（图形上绑定了数据）进行指定时：

.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})

如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

实现简单的动态效果

下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。

第一个圆，要求移动 x 坐标。

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");

//在1秒（1000毫秒）内将圆心坐标由100变为300
circle1.transition()
    .duration(1000)
    .attr("cx", 300);

第二个圆，要求既移动 x 坐标，又改变颜色。

var circle2 = svg.append("circle")... //与第一个圆一样，省略部分代码

//在1.5秒（1500毫秒）内将圆心坐标由100变为300，
//将颜色从绿色变为红色
circle2.transition()
    .duration(1500)
    .attr("cx", 300)
    .style("fill","red");

第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。

var circle3 = svg.append("circle")... //与第一个圆一样，省略部分代码

//在2秒（2000毫秒）内将圆心坐标由100变为300
//将颜色从绿色变为红色
//将半径从45变成25
//过渡方式采用bounce（在终点处弹跳几次）
circle3.transition()
    .duration(2000)
    .ease("bounce")
    .attr("cx", 300)
    .style("fill","red")
    .attr("r", 25);

对上一节中的柱状图添加动态效果：在添加文字元素和矩形元素的时候，启动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。

https://www.d3js.org.cn/document/d3-transition/#installing

https://www.d3js.org.cn/document/d3-ease/#api-reference

.attr("y",function(d){
  var min = yScale.domain()[0];
  return yScale(min);
})
.transition()
.delay(function(d,i){
  return i * 200
})
.duration(2000)
.ease(d3.easeBounce)
.attr("y",function(d){
	return yScale(d)
})

效果如图所示：