D3.js做一个简单的图表

环境：vue

使用：npm install d3 --save-dev(检查是否安装成功在package.json查找d3)

然后在组件中引入：import * as d3 from 'd3'

柱形图是一种简单的可视化图表，主要有矩形，文字标签，坐标轴所组成。这里只绘制矩形部分，主要讲解如何使用d3在svg中绘图。

画布是什么？

HTML5提供两种强有力的"画布"，SVG和Canvas。

SVG是什么?

SVG是指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG使用XML格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

SVG有如下特点：
1.SVG绘制的是矢量图，因此对图像进行放大不会失真。
2.基于XML,可以为每个元素添加JavaScript事件处理器。
3.每个图形均视为对象更改对象的属性图形也会改变。
4.不适合游戏应用。

Canvas是什么？

Canvas是通过javascript绘制2d图形，是html5中新增的元素。

Canvas有如下特点
1.绘制的是位图，图像放大后会失真。
2.不支持事件处理器
3.能够以.png和.jpg的格式保存对象
4.适合游戏使用

D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。

使用d3在body元素中添加svg的代码如下：

  let width=300;
    let height=300;
    let svg=d3.select('div')
      .append('svg')
      .attr('width',width)
      .attr('height',height)

有了画布接下来就可以在画布上做图了。

绘制矩形

这里绘制一个横向的矩形，不绘制坐标轴和文字，只绘制矩形。

在SVG中，矩形的元素标签是<rect></rect>

<svg>
    <rect></rect>
    <rect></rect>
</svg>

上面的rect里没有矩形的属性，常用的矩形的属性有4个：

x：矩形左上角的x坐标

y：矩形左上角的y坐标

width：矩形的宽度

height：矩形的高度

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

现在给出一组数据，要对此进行可视化。数据如下：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

为简单起见，我们直接用数值的大小来表示矩形的像素宽度（后面会说到这不是一种好方法）。然后，添加以下代码。

    var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x",20)
      .attr("y",function(d,i){
        return i * rectHeight;
      })
      .attr("width",function(d){
        return d;
      })
      .attr("height",rectHeight-2)
      .attr("fill","steelblue");

这段代码添加了与dataset数组的长度相同的矩形，所使用的语句是：

svg.selectAll('rect')//选择svg内的所有矩形元素
    .data(dataset)//绑定数组
    .enter()//指定选择集的enter部分
    .append('rect');//添加足够数量的矩形元素

这段代码以后会常常出现在D3的代码中，请务必牢记。目前不深入讨论它的作用机制是怎样的，当有数据而没有足够的图形元素的时候，使用此方法可以添加足够的元素。添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，前面已经讲过，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。

D3.js做一个简单的图表

猜你喜欢