D3.js库-5-做一个简单的图形
本文中介绍利用一组简单的数据制作一个条形图,先看效果:
画布
在HTML
中使用的画布有两种:SVG
和Canvas
,在D3
中使用的是SVG
。
SVG
SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。SVG的几个特点
-
SVG绘制的是矢量图,对图像进行放大后不会失真
-
基于XML,可以为每个元素添加JS事件的处理
-
每个图形是对象,更改对象的属性,图形也会改变
Canvas
Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素,Canvas的几个特点
-
绘制的是位图,放大后图形会失真
-
不支持JS事件处理器
-
能够以
.png
或者.jpg
格式进行保存图像
添加画布
有了画布才能在其上面作图。使用D3在body元素中添加svg画布的代码如下:
$\color{red}{此段代码常用,须记住}$
1 | // D3中定义画布svg,设置宽高 |
绘制矩形
rect
在SVG中,矩形的元素标签是rect。圆形的元素标签是circle
1 | <svg> |
rect的四个属性:
-
x:矩形左上角x坐标
-
y:矩形左上角的y坐标
-
width:宽度
-
height:高度
需要注意的:在SVG中,x轴的正方向是水平向右,y轴的正方向是垂直向下的
代码解释
当我们定义了数组和画布之后,需要添加和数组长度相同的矩形元素
1 | svg.selectAll("rect") // 绘制矩形使用rect标签 |
定义完每个矩形元素之后,使用无名函数对其进行属性的赋值,主要是上面👆提到的4个属性。在使用attr
属性的时候,颜色对应的fill
。
1 | .attr("x", 50) // 定义左上角的坐标x |
完整代码
下面附上完整的HTML代码,保存之后通过浏览器打开即可看到效果。
1 | <!DOCTYPE html> |