一、简介
D3是什么?
D3 的全称是
Data-Driven Documents
,它是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实它就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。
由于JavaScript 文件的后缀名通常为 .js,因此 D3 也被称为 D3.js 。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它在数据可视化方面能大大减小我们的工作量。D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,我们只需要输入几个简单的数据,就能够转换为各种绚丽的图形。
为什么要数据可视化?
- 结合HTML,SVG,CSS,D3可以图形化的,生动的展现数据。是目前最流行的数据可视化库,同时是Github上前端库排行第二(仅次于bootstrap)。
- 比Processing这样的底层绘图库更简单,比Echarts这样高度封装的图表库更自由。
- D3基于开源协议BSD-3-Clause3,可以免费用于商业项目。源码托管在GitHub 上star数已达50000多次,有大量用户和丰富友好的案例。
常用的数据可视化工具
- 用得比较多的是R语言、Python可视化库等
- 普通用户喜欢用的是 Excel
- 商业上的产品是Tableau、DOMO、 FineBI等
- 我们一般喜欢用的是html5canvas、svg和webGL等
D3的优缺点
-
优点
- D3最大的优点在于其资料丰富,案例非常多
- SVG矢量图形的特点是无损缩放,这个优势在显示2D图形式会有非常好的效果,并且兼容各种分辨率
- SVG图形的节点可以像dom元素一样控制,这就让自主创作图形变得更容易。相对于canvas这也是非常大的优势
-
缺点
- SVG是2D矢量图,不能画3D图形。(用2D矢量可以画很多带透视效果的伪3D图,那并不是真正的3D图!)
- D3.不支持IE6,7,8,如果想要IE8使用D3,请用r2d3.js(一个结合了 Raphael.js的扩展库)
- SVG的节点都是对象,非常占用内存
学习D3需要哪些必备技能?
二、D3的安装与使用
- 在
html
中使用 :
页面直接引入 :<script src="https://d3js.org/d3.v6.min.js"></script>
- 在
vue
项目中使用 :
在main.js中引入import * as d3 from 'd3' Vue.prototype.$d3=d3;
三、SVG的基础
D3 提供了众多的 “SVG 图形的生成器”,并且它们”都是只支持 SVG 的”
1、SVG :可伸缩矢量图形
- 使用XML格式定义图形
- 用来定义web上使用的矢量图
- 改变尺寸图形质量不受损
- 所有元素属性都可使用动画效果
- 继承了W3C标准
在HTML中使用SVG有两种方式,可以在HTML文件中直接嵌入svg内容,也可以直接引入后缀名为.svg的文件 如:
/* svg标签,这里的rect为矩形 */
<svg width="200" height="200">
<rect width="20" height="20" fill="red"></rect>
</svg>
/* 引入后缀名为.svg的文件 */
<img src="demo.svg" alt="测试svg图片">
注意
:svg为inline水平元素。并且需要绘制的所有图形都应被包含在<svg></svg>
标签内。
2、 SVG中的坐标系
SVG中的坐标系和我们之前认识的不一样,它是y轴向下,顺时针方向的角度为正值。元素的所有操作都是相对自身坐标系进行的。
3、SVG标签的属性
- 矩形 :
<rect></rect>
<svg width="200" height="200" style="border: 2px solid #58a">
<rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
//stroke 属性定义矩形边框的颜色
//stroke-width 属性定义矩形边框的宽度
//fill 属性定义矩形的填充颜色
</svg>
- 椭圆 :
<ellipse>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="190" cy="90" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
//CX属性定义的椭圆中心的x坐标
//CY属性定义的椭圆中心的y坐标
//RX属性定义的水平半径
//RY属性定义的垂直半径
</svg>
- 圆形 :
<circle></circle>
r属性定义圆的半径
- 线 :
<line></line>
- 路径 :
<path></path>
- 文字元素 :
<text></text>
- 折线 :
<polyline></polyline>
- 多边形 :
<polygon></polygon>
//折线
<svg width="200" height="200">
<polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline>
//points:设置各个点的坐标,各组坐标之间使用空格分割,x坐标与y坐标之间使用逗号分割
</svg>
四、D3的使用
1、更改HelloWorld
- 用js来更改HelloWorld
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dogs";
}
</script>
</body>
</html>
结果为:
I like dogs
I like dogs
- 用 D3 来更改 HelloWorld,只需要一行代码就可以。
<p>Hello World 1</p>
<p>Hello World 2</p>
//一定要先引入D3.js
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("I like dogs");
</script>
2、选择集
在 D3 中,用于选择元素的函数有两个,这两个函数返回的结果称为选择集。
- d3.select():选择所有指定元素的第一个
- d3.selectAll():选择指定全部元素
使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。
链式语法:d3.select().selectAll().text()
具体使用:
var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p"); //选择body中的第一个p元素
var p = body.selectAll("p"); //选择body中的所有p元素
var svg = body.select("svg"); //选择body中的svg元素
var class = body.select(".class");//选择body中class类元素
选择元素函数后常用链式表达接其他操作。例如:改变字体的颜色和大小。原理: 先将选中的元素赋值给变量 p,然后通过变量 p 来改变样式
//选择<body>中所有的<p>,其文本内容为 I like dogs,选择集保存在变量 p 中
var p = d3.select("body")
.selectAll("p")
.text("I like dogs");
//修改段落的颜色和字体大小
p.style("color","red")
.style("font-size","72px");
选择第二个p元素的方法
关于 select 和 selectAll 的参数,其实是符合 CSS 选择器的条件的
一种比较简单的是给第二个元素添加一个 id 或者class,然后,使用 select 选择元素
<p>Pear</p>
<p id="myid">Pear</p>
<p>Pear</p>
var p2 = body.select("#myid");
p2.style("color","red");
3、绑定数据
D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上。
- datum():绑定一个数据到选择集上
- data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定
4、无名函数 function(d, i)
当”选择集”需要使用”被绑定的数据”时,常需要这么使用
- d 代表数据,也就是与某元素绑定的数据
- i 代表索引,代表数据的索引号,从 0 开始
绑定数据的例子:假设现在有三个段落元素如下:
<p></p>
<p></p>
<p></p>
- 对于datum()
假设有一字符串Hello D3,要将此字符串分别与三个段落元素绑定,代码如下:
绑定数据后,使用这个数据来修改三个段落元素的内容,其结果如下:var str = "Hello D3"; var body = d3.select("body"); var p = body.selectAll("p"); p.datum(str); p.text(function (d, i) { return "第 " + i + " 个元素绑定的数据是 " + d; });
- 对于data()
有一个数组[“one”,“two”,“three”],接下来要分别将数组的各元素绑定到三个段落元素上。调用 data() 绑定数据,并替换三个段落元素的字符串为被绑定的字符串,代码如下:
结果自然是三个段落的文字分别变成了数组的三个字符串。var dataset = ["one", "two", "three"]; var p = d3.select("body").selectAll("p"); p.data(dataset) .text(function (d, i) { return "This is " + d; });
5、插入元素
-
append():在选择集末尾插入元素
在 body 中 p元素后面添加一个段落元素。var body = d3.select("body"); body.append("p").text("append p element");
-
insert():在选择集前面插入元素
在 body 中 id 为 myid 的元素前添加一个段落元素。var body = d3.select("body"); body.insert("p","#myid").text("insert p element");
6、删除元素
删除元素使用 remove
var p = body.select("#myid");
p.remove();