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

在这里插入图片描述

绘图:以柱状图为例

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

HTML 5 提供两种强有力的“画布”:SVGCanvas

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

效果如图所示:
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页