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 中顯示。

1.SVG繪製的是矢量圖，因此對圖像進行放大不會失真。

2.基於XML,可以爲每個元素添加JavaScript事件處理器。

3.每個圖形均視爲對象更改對象的屬性圖形也會改變。

4.不適合遊戲應用。

 

 

 

 

 

Canvas是什麼？

Canvas是通過javascript繪製2d圖形，是html5中新增的元素。

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 代表索引號。給屬性賦值的時候，是需要用到被綁定的數據，以及索引號的。