折線圖 · d3js入門

# 折線圖 ## 需求某小超市一周盈利統計如下。純收入分別是:820, 932, 901, 934, 1290, 1330, 1320。繪制一個折線圖來實現數據展示。 ![](https://box.kancloud.cn/fd823f7ac8028fbc19f80a139dd3b091_749x511.png) ## 分析拆分需要繪制哪些： 1. x軸為板塊 2. y軸為收入值 3. 中心的折線 4. y軸刻度的水平線根據柱狀圖的對比，這次只需要再分析線條：線條實現思路有兩種： 1. 兩點之間用line連接，最終拼接而成。 2. 使用path實現整個線條，使用d3.line繪制。這個的好處是，后期可以修改連線時的形式，比如使用貝塞爾方式，等等再細化思路： 1. 首先構建一個svg，確定圖表應該繪制的大小。 2. 分析數據哪個是y軸數據哪個是X軸數據， 3. 計算x，y軸的domain范圍，可以使用d3.max，d3.min，d3.range等等 4. 構建比例尺。 5. 由于坐標軸需要留白，所以使用g標簽通過transform進行移動。之后調用axis，繪制坐標軸。 6. 繪制折線，創建g標簽通過transform進行移動，讓其正好偏移至繪制區域。 7. 通過data綁定數據，之后通過使用d3.line定義如何繪制 ## 繪制 ``` javascript //創建svg var svg = d3.select('#root') .append('svg') .attr('width', 600) .attr('height', 600) .style("background-color","rgb(142, 137, 137)"); var margin=[100,100,100,100] //模擬數據: var data1 = ['周一','周二','周三','周四','周五','周六','周日'] var data = [820, 932, 901, 934, 1290, 1330, 1320] //構建y軸的比例尺 var ymax = d3.max(data,function(d){console.log(d);return d})+100 //為了增大圖表y的上限 var y=d3.scaleLinear() .domain([0,ymax]).range([400,0]) var axisY = d3.axisLeft(y); var axisYG = svg.append('g') .attr('class','axisY') .attr('transform','translate(100,100)') .call(axisY); //繪制innerY axisYG.selectAll('g.tick') .selectAll('line') .attr('x1',-5) .attr('x2',400) .attr('stroke-dasharray','5, 5'); //構建x軸比例尺 var x = d3.scalePoint().domain(data1).range([0,400]) var axisX = d3.axisBottom(x) var axisXG = svg.append('g') .attr('class','axisY') .attr('transform','translate(100,500)') .call(axisX); //繪制line //構建一個默認為直線的線條繪制器 var line = d3.line() .x(function(d,i) { return x(data1[i]); }) .y(function(d) {return y(d) }); //構建g進行偏移處理,構建path綁定數據后,調用繪制器line svg.append('g') .attr('transform','translate(100,100)') .append('path') .style('fill','none') //此處需要將處理是為了折線只顯示線條 .style('stroke',"rgb(51, 209, 243)") .style('stroke-width',3) .datum(data) .attr('d',line) ``` 實際效果如：直線實例現在我們需要做成下圖形式的折線圖改怎么做呢？ ![](https://box.kancloud.cn/0e287784b58d2954ff6c867f1e073f66_729x509.png) 很簡單我們只需要替換掉繪制器d3.line為d3.area就行 ``` javascript //更換為area繪制 var area = d3.area() .x(function(d,i) { return x(data1[i]); }) .y1(function(d) {return y(d) }) .y0(y(0)) //構建g進行偏移處理,構建path綁定數據后,調用繪制器line svg.append('g') .attr('transform','translate(100,100)') .append('path') .style('fill','rgba(48, 214, 50, 0.73)') //此處需要將處理是為了折線只顯示線條 .style('stroke',"rgb(51, 209, 243)") .style('stroke-width',1) .datum(data) .attr('d',area) ``` 實際效果如：區域折線實例接下來直線的連接方式顯示上要求平滑，類似這種 ![](https://box.kancloud.cn/f52449dbfc15ca69c5864156588f11bc_711x520.png) 很簡單我們只需要修改一下d3.line的參數就行 ``` javascript //構建一個默認為直線的線條繪制器 var line = d3.line() .x(function(d,i) { return x(data1[i]); }) .y(function(d) {return y(d) }) .curve(d3.curveBundle.beta(0.5)) ``` 關于曲線需要配置不同曲折度可以參考[d3.shape#curves](https://github.com/xswei/d3-shape/blob/master/README.md#curves) ## 實例直線實例:[line0](https://doter1995.github.io/d3-start-course/line/line-0.html) ![](https://box.kancloud.cn/b581406c7c2b87e5c937eaf9952eafcb_562x511.png) 區域折線實例:[line1](https://doter1995.github.io/d3-start-course/line/line-1.html) ![](https://box.kancloud.cn/08120df3ad872782fe5f56fd1f347d7f_530x505.png) 曲線實例:[line0](https://doter1995.github.io/d3-start-course/line/line-2.html) ![](https://box.kancloud.cn/9cf18afe53641c3b174147126e55bb48_526x504.png)