D3.js實現折線圖的方法詳解

2019-11-20 08:55:36

字體：大中小

來源：轉載

供稿：網友

前言

D3.js是一個幫助開發者操縱基于數據的文檔的JavaScript類庫，在《D3.js實現柱狀圖的方法詳解》中已經給大家介紹過如何用D3.js來實現一個簡單的柱狀圖了，今天我們來學習用D3.js來實現折線圖，感興趣的朋友們下面來一起看看吧。

折線圖由坐標軸、線條和點組成。和實現柱狀圖一樣，我們還是先把大概的畫圖框架搭起來，代碼如下（別忘了添加D3.js）：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <title>折線圖</title>    <style>      .container {        margin: 30px auto;        width: 600px;        height: 300px;        border: 1px solid #000;      }    </style>  </head>  <body>    <div class="container">      <svg width="100%" height="100%"></svg>    </div>    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    <script>      window.onload = function() {        var width = 600, height = 300;        // SVG畫布邊緣與圖表內容的距離        var padding = { top: 50, right: 50, bottom: 50, left: 50 };        // 創建一個分組用來組合要畫的圖表元素        var main = d3.select('.container svg').append('g')          // 給這個分組加上main類          .classed('main')          // 設置該分組的transform屬性          .attr('transform', "translate(" + padding.top + ',' + padding.left + ')');      };    </script>  </body></html>

坐標軸的實現

要創建坐標軸，需要先創建比例尺。在《D3.js實現柱狀圖的方法詳解》中提到過序數比例尺和線性比例尺，因為折線的點與點之間是存在連續的關系的，所以折線圖的x軸和y軸我們都采用線性比例尺。

// 模擬數據var dataset = [  {x: 0, y: 11}, {x: 1, y: 35},  {x: 2, y: 23}, {x: 3, y: 78},  {x: 4, y: 55}, {x: 5, y: 18},  {x: 6, y: 98}, {x: 7, y: 100},  {x: 8, y: 22}, {x: 9, y: 65}];// 創建x軸的比例尺(線性比例尺)var xScale = d3.scale.linear()    .domain(d3.extent(dataset, function(d) {      return d.x;    }))    .range([0, width - padding.left - padding.right]);// 創建y軸的比例尺(線性比例尺)var yScale = d3.scale.linear()    .domain([0, d3.max(dataset,function(d) {      return d.y;    })])    .range([height - padding.top - padding.bottom, 0]);// 創建x軸var xAxis = d3.svg.axis()    .scale(xScale)    .orient('bottom');// 創建y軸var yAxis = d3.svg.axis()    .scale(yScale)    .orient('left');// 添加SVG元素并與x軸進行“綁定”main.append('g')    .attr('class', 'axis')    .attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')    .call(xAxis);// 添加SVG元素并與y軸進行“綁定”main.append('g')    .attr('class', 'axis')    .call(yAxis);

這次我們模擬了一些點的數據來進行折線的繪制。d3.scale.linear()創建了線性比例尺，linear.domain()定義定義域，linear.range()定義值域。這里需要注意一下，因為SVG畫布的y軸與傳統認知上的y軸的方向是反著來的，所以在定義y軸的定義域和值域對應關系時，也需要反著來。d3.extent可以得到參數數組中的最大值和最小值，并以數組的形式返回。然后用d3.svg.axis()創建了兩個坐標軸，把比例尺應用到它們上面，并且用axis.orient()設置了坐標軸的刻度尺的方向。最后，添加SVG元素，用call()把定義好的坐標軸與SVG元素聯系起來。通過設置它們的transform屬性來移動元素，使它們看起來像是一個坐標系。

折線的實現

在D3.js中，需要先創建一個線的函數，然后由該函數得出的值賦給代表折線的path元素的d屬性，才能繪制出折線。需要明確，line是一個函數，不是一個對象。

具體的代碼如下：

// 添加折線var line = d3.svg.line()    .x(function(d) {      return xScale(d.x)    })    .y(function(d) {      return yScale(d.y);    })    // 選擇線條的類型    .interpolate('linear');// 添加path元素，并通過line()計算出值來賦值main.append('path')    .attr('class', 'line')    .attr('d', line(dataset));

這樣做了以后，我們得到了如下圖所示的一條線。

點的實現

點其實就是一個個的圓，所以在這里我們用SVG里的circle元素來畫點。

// 添加點main.selectAll('circle')    .data(dataset)    .enter()    .append('circle')    .attr('cx', function(d) {      return xScale(d.x);    })    .attr('cy', function(d) {      return yScale(d.y);    })    .attr('r', 5)    .attr('fill', function(d, i) {      return getColor(i);    });

在main元素中選擇到所有的圓先“占位”（因為此時選擇到的是一個空的集合，只是這個集合代表main中所有的圓），然后綁定dataset到此集合上，通過enter()和append()搭配使用添加新的circle元素直到集合元素個數與dataset子元素個數相同為止。用比例尺計算出各圓的坐標并對其相關屬性進行賦值，就完成了點的添加。