D3.js基礎(考試成績情境)

編輯 : Frank
日期 : 2019/08/14
參考網址

範例情境

製作考試成績的長條圖至網頁中呈現，並根據成績給予不同顏色顯示。

使用D3.js

掛載 d3.js

在開始寫d3.js之前，記得在html中掛載d3.js套件

1
<script src="https://d3js.org/d3.v4.min.js"></script>

添加svg畫布

定義圖形的長和寬，並且創建SVG畫布。

1
2
3
4
5
6
7
8
var svg_width = 500;
var svg_height = 500;
var bar_padding = 5

var svg = d3.select("body")
    .append("svg")
    .attr("width",svg_width)
    .attr("height",svg_height);

成績資料集

定義一個成績資料集。

1
var dataset = [88,96,73,61,42,77,69,51,49];

d3.js讀取外部檔案

1
2
3
4
file = 'dataset.json'
d3.json(file,function(error,dataset){
    //d3.js繪圖程式寫至裡面
});

長條圖繪製

通過svg來製作相對應的圖形，給予圖形屬性、成績資料、長條圖x,y軸位置和長條圖長寬。

svg屬性添加:

  • x,y : 圖形位置
  • width,height : 圖形大小
  • fill : 圖形顏色

屬性function參數:

  1. 成績資料
  2. 第幾位學生
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
svg.selectAll("rect") //選擇svg內所有矩形
    .data(dataset) //綁定資料
    .enter() // 自動生成元素數量
    .append("rect") //添加足夠的矩形元素
    .attr("x",function(d,i){
        return i * (svg_width / dataset.length);
    })
    .attr("y",function(d){
        return svg_height - (d*4);
    })
    .attr("width",svg_width / dataset.length - bar_padding)
    .attr("height",function(d){
        return d *4;
    })
    .attr("fill",function(d){
        return "rgb(" + d * 3 + " , 0 , 0)";
    })

除了繪製圖形外，也需要幫助圖形添加相對應的文字敘述，在這裡示範把分數附在長條圖中。

svg屬性添加

  • x,y : 文字位置
  • text-anchor : 文字位置
  • font-family : 文字樣式
  • font-size : 文字大小
  • fill : 文字顏色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d){
        return d;
    })
    .attr("text-anchor","middle")
    .attr("x",function(d,i){
        return i * (svg_width / dataset.length) + (svg_width / dataset.length - bar_padding)/2;
    })
    .attr("y",function(d){
        return svg_height - (d*4) +20 ;
    })
    .attr("font-family","sans-serif")
    .attr("font-size","20px")
    .attr("fill","white")

最終成果

使用d3.js來繪製成績長條圖，並在圖形上顯示相對應的文字描述，此外還根據成績來改變長條圖顏色。