Fork me on GitHub

D3.js库-5-做一个简单的图形

D3.js库-5-做一个简单的图形

本文中介绍利用一组简单的数据制作一个条形图,先看效果:

画布

HTML中使用的画布有两种:SVGCanvas,在D3中使用的是SVG

SVG

SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。SVG的几个特点

  • SVG绘制的是矢量图,对图像进行放大后不会失真

  • 基于XML,可以为每个元素添加JS事件的处理

  • 每个图形是对象,更改对象的属性,图形也会改变

Canvas

Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素,Canvas的几个特点

  1. 绘制的是位图,放大后图形会失真

  2. 不支持JS事件处理器

  3. 能够以.png或者.jpg格式进行保存图像

添加画布

有了画布才能在其上面作图。使用D3在body元素中添加svg画布的代码如下:

$\color{red}{此段代码常用,须记住}$

1
2
3
4
5
6
7
8
// D3中定义画布svg,设置宽高
const width = 300;
const height = 300;

const svg = d3.select("body") // 选择body元素
.append("svg") // 添加svg
.attr("width", width) // 设置SVG的宽高
.attr("height", height)

绘制矩形

rect

在SVG中,矩形的元素标签是rect。圆形的元素标签是circle

1
2
3
4
5
<svg>
<rect></rect>
<rect></rect>
<rect></rect>
</svg>

rect的四个属性:

  • x:矩形左上角x坐标

  • y:矩形左上角的y坐标

  • width:宽度

  • height:高度

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

代码解释

当我们定义了数组和画布之后,需要添加和数组长度相同的矩形元素

1
2
3
4
svg.selectAll("rect")  // 绘制矩形使用rect标签
.data(dataset) // 绑定数据dataset
.enter() // 指定数据集中的enter部分
.append("rect") // 添加足够的元素。有数据但是没有图形元素的时候,使用append()进行追加

定义完每个矩形元素之后,使用无名函数对其进行属性的赋值,主要是上面👆提到的4个属性。在使用attr属性的时候,颜色对应的fill

1
2
3
4
5
6
7
8
9
.attr("x", 50)  // 定义左上角的坐标x
.attr("y", function(d,i){ // 定义左上角的坐标y:d是作用的数据,i是索引号
return i * rectHeight;
})
.attr("width", function(d){ // 设置宽度
return d;
})
.attr("height", rectHeight-2) // 设置长度
.attr("fill", "blue"); // 设置属性颜色

完整代码

下面附上完整的HTML代码,保存之后通过浏览器打开即可看到效果。

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
<!DOCTYPE html>
<html>
<head>
<title>D3.js tutorial</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<script>

// 定义数据:表示矩形的宽度
const dataset = [80, 160, 20, 100, 300]
// 定义画布的边距
const merge = {top:60, bottom:60, left:60,right:60}


// D3中定义画布svg,设置宽高
const width = 300;
const height = 300;

var svg = d3.select("body") // 选择body元素
.append("svg") // 添加svg
.attr("width", width) // 设置SVG的宽高
.attr("height", height)

// 绘图:矩形的4个属性:x/y/width/height
// 定义每个矩形占据的像素高度
const rectHeight = 25;

svg.selectAll("rect") // 绘制矩形使用rect标签
.data(dataset) // 绑定数据dataset
.enter() // 指定数据集中的enter部分
.append("rect") // 添加足够的元素。有数据但是没有图形元素的时候,使用append()进行追加
.attr("x", 50) // 定义左上角的坐标x
.attr("y", function(d,i){ // 定义左上角的坐标y:d是作用的数据,i是索引号
return i * rectHeight;
})
.attr("width", function(d){ // 设置宽度
return d;
})
.attr("height", rectHeight-2) // 设置长度
.attr("fill", "blue"); // 设置属性颜色
</script>
</body>
</html>

本文标题:D3.js库-5-做一个简单的图形

发布时间:2020年05月15日 - 11:05

原始链接:http://www.renpeter.cn/2020/05/15/D3-js%E5%BA%93-5-%E5%81%9A%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E5%BD%A2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Coffee or Tea