D3可视化:(1)初次见面,SVG与D3的魅力

D3.js是一个基于HTML/SVG/CSS的数据可视化库,是领域内非常强大的存在了。

今后会在工作使用,也因此开始了自学之旅。学习过程中,我主要通过Curran Kelleher老师的系列教程进行学习,这个笔记用于学习、整理和分享,陆续学习、更新和记录中….


学习目的:

  • 熟悉和认识D3.js
  • 练习使用SVG画图,熟悉操作
  • 练习D3.js的基本函数和操作

完成效果图:
在线demo

D3初印象

选择集

D3是实现数据可视化,仍然离不开传统DOM的选择和操作,也因此,D3提供了类似Jquery的DOM操作指令:

  • d3.select:选择第一个指定元素
  • d3.selectAll : 选择所有的元素
1
2
const svg = d3.select('svg') //选择svg
const p = svg.selectAll('p') //选择svg下所有的p标签

当然,可以使用#id 以及 .class 对id和类进行选择

查看状态

d3.selectd3.selectAll返回的都是选择集,添加、删除以及修改都需要用到选择集,查看状态有三个函数可以使用:

  • selection.empty() 选择集为空,返回true,否则返回false
  • selection.node() 返回第一个非空元素,如果选择集为空,返回null
  • selection.size() 返回选择集中的元素个数

设定和获取属性

使用selectselectAll选择后,可以通过attr获取和设定属性,可以使用append方法添加元素

1
2
3
const svg = select('svg');
svg.append('circle')
.attr('r','30')

使用D3和SVG画图

html文件

1
2
3
4
5
6
7
8
9
10
<html lang="en">
<head>
<title>Smile face with d3</title>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="index.js"></script>
</body>
</html>

主要内容通过index.js实现:

第一步:通过d3选择SVG,使用circle构建轮廓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');
svg.append('circle')
.attr('r',height / 2)
.attr('cx', width / 2)
.attr('cy', height / 2)
.attr('fill', 'yellow')
.attr('stroke','black')

const leftEye = svg.append('circle')
.attr('r', 30)
.attr('cx', width / 2 - 100)
.attr('cy', height / 2 - 80)
.attr('fill', 'black')

const rightEye = svg.append('circle')
.attr('r', 30)
.attr('cx', width / 2 + 100)
.attr('cy', height / 2 - 80)
.attr('fill', 'black')

要点:

  • 通过attr获取的属性是string类型的,通过parseFloat或者+转换为number类型
  • 对圆形circle的属性cx cy等,使用变量作为其大小设置的值,而不用一个数字,方便日后的维护
  • leftEye和RightEye用类似的方法,创造出来,并将眼睛放置在合适的位置。

代码优化

1)可以发现,对三个圆圆心的操作cxcy出现了多次,而作用也仅仅是为了将圆放在中心。因此,可以通过SVG中的<g>来分组来实现一次性操作。

1
2
3
4
5
6
7
8
const g = svg.append('g')
.attr('transform',`translate(${ width / 2}, ${ height / 2})`)

//这样,在画圆的时候,就可以去掉对其圆心的操作,因为默认的位置就在中心了
const circle = g.append('circle')
.attr('r',height / 2)
.attr('fill', 'yellow')
.attr('stroke','black')

2)同样的,对于眼睛的操作,也有点繁琐,可以通过变量和分组,提高代码的可维护性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const eyeSpacing = 100;
const eyeYoffset = -80
const eyeRadius = 30;

const eyesG = g.append('g')
.attr('transform', `translate(0, ${eyeYoffset})`);

const leftEye = eyesG.append('circle')
.attr('r', eyeRadius)
.attr('cx', - eyeSpacing)

const rightEye = eyesG.append('circle')
.attr('r', eyeRadius)
.attr('cx', + eyeSpacing)

第二步 嘴巴

嘴巴实际上是一个弧线,使用SVG中的path进行绘制。熟悉path的,当然可以直接给参数进行绘制,但是d3对圆弧有更好的支持,可以使用d3.arc函数,方便的绘制圆弧。

arc函数

根据官方的API手册,函数的使用方法如下:

1
2
3
4
5
6
7
8
var arc = d3.arc();

arc({
innerRadius: 0,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

其中,innerRadius是内圆半径,outerRadius是外圆半径,startAngle和endAngle分别是开始和结束的弧度(完整的圆是0~2PI)

笑脸的实现

根据以上内容,代码如下:

1
2
3
4
5
6
7
const mouth = g.append('path')
.attr('d',d3.arc()({
innerRadius: 150,
outerRadius: 170,
startAngle: Math.PI /2,
endAngle: Math.PI * 3 / 2
}))

眉毛

眉毛用简单的长方形来代替,也就是svg中的<rect>,使用前文的编程风格,将眉毛归为一个group,并将位置设定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const eyebrowWidth = 50;
const eyebrowHeight = 10;
const eyebrowYoffset = -150;
const BrowG = g.append('g')
.attr('transform',`translate(${-eyebrowWidth / 2},${eyebrowYoffset})`);

const leftEyebrow = BrowG.append('rect')
.attr('width',eyebrowWidth)
.attr('height',eyebrowHeight)
.attr('x',-eyeSpacing)

const rightEyebrow = BrowG.append('rect')
.attr('width', eyebrowWidth)
.attr('height', eyebrowHeight)
.attr('x', eyeSpacing)

加入动画

使用transition函数设置眉毛的动画,让笑脸动起来

1
2
3
4
5
6
const BrowG = g.append('g')
.attr('transform',`translate(${-eyebrowWidth / 2},${eyebrowYoffset})`);
BrowG.transition().duration(2000)
.attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset - 50})`)
.transition().duration(2000)
.attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset})`).duration(2000)

注意点:

  • transition函数要对号入座,即如果加在了<g>上,对应的增加的属性动画应该在transform上; 如果动画在<rect>上,动画应该在y属性上。
  • 添加动画不能在append函数之后连接,比如BrowG.append('g').attr(...).transition()是不行的。因为过度动画无法绑定在append的元素上,需要分别操作。

完整代码

code downlaod here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');
const g = svg.append('g')
.attr('transform',`translate(${ width / 2}, ${ height / 2})`)

const circle = g.append('circle')
.attr('r',height / 2)
.attr('fill', 'yellow')
.attr('stroke','black')

const eyeSpacing = 100;
const eyeYoffset = -80
const eyeRadius = 30;
const eyebrowWidth = 50;
const eyebrowHeight = 10;
const eyebrowYoffset = -150;

const eyesG = g.append('g')
.attr('transform', `translate(0, ${eyeYoffset})`);

const leftEye = eyesG.append('circle')
.attr('r', eyeRadius)
.attr('cx', - eyeSpacing)

const rightEye = eyesG.append('circle')
.attr('r', eyeRadius)
.attr('cx', + eyeSpacing)

const mouth = g.append('path')
.attr('d',d3.arc()({
innerRadius: 150,
outerRadius: 170,
startAngle: Math.PI /2,
endAngle: Math.PI * 3 / 2
}))

const BrowG = g.append('g')
.attr('transform',`translate(${-eyebrowWidth / 2},${eyebrowYoffset})`);
BrowG.transition().duration(2000)
.attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset - 50})`)
.transition().duration(2000)
.attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset})`).duration(2000)

const leftEyebrow = BrowG.append('rect')
.attr('width',eyebrowWidth)
.attr('height',eyebrowHeight)
.attr('x',-eyeSpacing)

const rightEyebrow = BrowG.append('rect')
.attr('width', eyebrowWidth)
.attr('height', eyebrowHeight)
.attr('x', eyeSpacing)
0%