D3.js上手——折線圖

折線圖是數據統計中常常會用到的圖表，用於二維數據的展現，本文將使用D3上手製做一個簡單的折線圖

肯定數據

表格數據是一家店鋪一年的銷售量

月份	銷售量(件)
1月	454
2月	628
3月	756
4月	632
5月	582
6月	704
7月	766
8月	804
9月	884
10月	960
11月	1095
12月	1250

var dataset = [[1, 224], [2, 528], [3, 756], [4, 632], [5, 582], [6, 704],
              [7, 766], [8, 804], [9, 884], [10, 960], [11, 1095], [12, 1250]];
複製代碼

要找出最大值和最小值，須要用到D3的數組方法

• d3.min(array[,accessor]) 返回數組中的最小值
• d3.max(array[,accessor]) 返回數組中的最大值

accessor是一個執行min或max函數前調用的方法，由於dataset是一個二維數組，所以須要在每一項數組拿出來後返回子數組中的第二個數值，能夠取得1至12月份銷售量的最大值和最小值

var min = d3.min(dataset, function(d) {
  return d[1];
})
var max = d3.max(dataset, function(d) {
  return d[1];
})
複製代碼

還須要一些畫圖的基礎數據

// 圖表的寬度和高度
var width = 600;
var height = 600;
// 預留給軸線的距離
var padding = { top: 50, right: 50, bottom: 50, left: 50 };
複製代碼

設置比例尺

因爲畫布的大小有限，數據值很大，因此折線圖一般要用到線性比例尺，用畫布上的距離來表明圖表中量化的數值

• d3.scaleLinear() 設置一個線性比例尺
• quantize.domain([domain]) 取得或設置比例尺的定義域
• quantize.range([range]) 取得或設置比例尺的值域

在x軸方向，數據從1月份到12月份，畫布上的對應距離爲畫布寬度減去左右空隙，在y軸方向同理，不過y軸的值域是顛倒的，由於y軸的零點在最下面，刻度從下往上的遞增

var xScale = d3.scaleLinear()
              .domain([1, 12])
              .range([0, width - padding.left - padding.right]);
var yScale = d3.scaleLinear()
              .domain([0, max])
              .range([height - padding.top - padding.bottom, 0]);
複製代碼

繪製軸線

• d3.axisBottom(scale) 建立一個新的軸生成器
• d3.axisBottom(scale).scale([scale]) 設置或者取得比例尺

有了比例尺就能夠繪製軸線了，建立比例尺，並調用剛纔設置的比例尺

var svg = d3.select('body')
            .append('svg')
            .attr('width', width + 'px')
            .attr('height', height + 'px');
var xAxis = d3.axisBottom()
              .scale(xScale);
var yAxis = d3.axisLeft()
              .scale(yScale);
複製代碼

在svg中須要一個容器來裝軸線，就是裝載羣組的g標籤，在g標籤中調用軸生成器，生成例如path、line、text等svg標籤組成的軸線

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
  .call(xAxis);
svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
  .call(yAxis);
複製代碼

繪製的軸線圖以下所示

繪製曲線

• d3.line() 新建一個線生成器
• line.x([x]) 設置或獲取x-座標訪問器
• line.y([y]) 設置或獲取y-座標訪問器

D3爲了生成各類線段、形狀、圖形，內置了路徑生成器，這裏須要用到線段生成器，並指定二維的訪問器，調用剛纔設置的比例尺

var linePath = d3.line()
                .x(function(d){ return xScale(d[0]) })
                .y(function(d){ return yScale(d[1]) });
複製代碼

svg.append('g')
  .append('path')
  .attr('class', 'line-path')
  .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
  .attr('d', linePath(dataset))
  .attr('fill', 'none')
  .attr('stroke-width', 3)
  .attr('stroke', 'green');
複製代碼

svg.append('g')
  .selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle')
  .attr('r', 5)
  .attr('transform', function(d){
    return 'translate(' + (xScale(d[0]) + padding.left) + ',' + (yScale(d[1]) + padding.top) + ')'
  })
  .attr('fill', 'green');
複製代碼

最終繪製的軸線圖以下所示

查看完整示例代碼