可视化D3.js库(5)-做一个简单的图形

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

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

image

画布

在HTML中使用的画布有两种：SVG和Canvas，在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画布的代码如下：

// 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

rect

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

rect的四个属性：

• x：矩形左上角x坐标

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

• width：宽度

• height：高度

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

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

image

代码解释

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

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

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

.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");   // 设置属性颜色

完整代码

image

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