D3.js實現(xiàn)繪制折線圖的教程詳解
本章我們來實現(xiàn)一下折線圖，有了畫柱狀圖的經(jīng)驗，我們可以快速的分析出柱狀圖和折線圖的區(qū)別主要是x軸比例尺和繪制數(shù)據(jù)圖形,其余的畫布，坐標軸等，本章就不過多的講解了。
x軸比例尺
根據(jù)折線圖x軸的特點，可以分析出我們需要在x軸畫出間隔相同的N的點,所以我們采用scalePoint。
const xScale = d3.scalePoint()
.domain(data.map((d) => d.name))
.range([0, dimensions.boundedWidth]);
如果使用scaleBand就會是下圖的效果，刻度和數(shù)據(jù)點不能對齊。
數(shù)據(jù)折線
D3提供了一些圖形構造器，例如d3.line,d3.area,d3.arc,d3.pie等，本章借著折線圖，我們介紹一下d3.line和d3.area。
d3.line
通過點位的二維數(shù)組自動生成path：
// 構建一個默認為直線的線條繪制器
const lineGenerator = d3.line();
// 定義一下點位
const points = [
[0, 50],
[100, 200],
[300, 100],
[400, 150],
[300, 200]
];
// 生成一條path路徑
const linePath = lineGenerator(points);
// 渲染line
svg.append("path")
.attr("d", linePath)
.attr("fill", "none")
.attr("stroke-width", 1)
.attr("stroke", "red");
指定x,y的取值方式
const points = [
{ x: 0, y: 50 },
{ x: 100, y: 200 },
{ x: 300, y: 100 },
{ x: 400, y: 150 },
{ x: 300, y: 200 }
];
const lineGenerator = d3
.line()
.x((d) => d.x)
.y((d) => d.y);
const linePath = lineGenerator(points);
在實際開發(fā)中，我們基本上都是需要通過x軸和y軸的比例尺去計算，每個數(shù)據(jù)對應點的位置信息。
圓滑的曲線
const lineGenerator = d3
.line()
.x((d) => d.x)
.y((d) => d.y)
.curve(d3.curveBasis) // 曲線插值
D3提供了很多插值，例如:curveBasis,curveCardinal,curveCatmullRom,curveStep,curveStepBefore,curveStepAfter都可以試試效果
初步了解了d3.line,我們就可以輕松的繪制我們的折線圖了：
const line = d3.line()
.x((d) => xScale(xValue(d)))
.y((d) => yScale(yValue(d)));
chartG.append("g")
.append("path")
.style("fill", "none")
.style("stroke", "rgb(51, 209, 243)")
.style("stroke-width", 1)
.datum(data)
.attr("d", line);
復制代碼這里我們使用的是datum，因為只需要一條折線，而且需要在這條折線上生成所有的數(shù)據(jù)的點位以構成path路徑，如果忘了datum和data的區(qū)別，可以回顧一下DataJoin。
d3.area
除了可以繪制一條折線，我們還可以繪制一個填充的折線區(qū)域，這也是比較常見的使用場景，這就需要用到d3.area。
d3.area用來設置坐標的屬性有六個x,y,x0,y0,x1,y1，它們通常分為兩組來使用即：x, y0, y1,y, x0, x1分別代表兩個方向水平和垂直。
水平方向
const areaGenerator = d3.area()
.x((d) => d.x)
.y1((d) => d.y)
.y0(10);
const areaPath = areaGenerator(points);
svg
.append("path")
.attr("d", areaPath)
.attr("fill", "none")
.attr("stroke-width", 1)
.attr("stroke", "red");
我們打印一下areaPath：
M0,50L100,200L300,100L400,150L400,10L300,10L100,10L0,10Z
翻譯一下：
移動到(0,50)->繪制線到(100,200)->繪制線到(300,100)->繪制線到(400,150)
->繪制線到(400,10)->繪制線到(300,10)->繪制線到(100,10)
->繪制線到(0,10)->閉合(將起點與終點連接)
其實理解起來就像是小學的拼音連線題一樣：
垂直方向
const points = [ // y 是遞增的
{ x: 20, y: 50 },
{ x: 100, y: 100 },
{ x: 300, y: 150 },
{ x: 200, y: 200 },
{ x: 300, y: 230 }
];
const areaGenerator = d3.area()
.y((d) => d.y)
.x0(10)
.x1((d) => d.x);
值得注意的是，水平方向的area，points的特點是按x遞增的，垂直方向的area，points的特點是按y遞增的。
不排序的話，你可能會得到一個意料之外的圖形：
最后就可以完成我們的折線圖area模式了：
const area = d3.area()
.x((d) => xScale(xValue(d)))
.y1((d) => yScale(yValue(d)))
.y0(yScale(0));
chartG.append("g")
.append("path")
.style("fill", "none")
.style("fill", "green")
.style("stroke", "rgb(51, 209, 243)")
.style("stroke-width", 1)
.datum(data)
.attr("d", area);
總結(jié)
不同的圖表可能需要不同的比例尺，這個需要我們根據(jù)比例尺的特性和圖表的特征相互對照來選擇適合的比例尺。本章我們只簡單介紹了line和area的一些特性，更詳細的api還是需要參考官方文檔，最后建議打開demo調(diào)試一下，改改數(shù)據(jù)，樣式，比例尺等看看效果。
到此這篇關于D3.js實現(xiàn)繪制折線圖的教程詳解的文章就介紹到這了,更多相關D3.js繪制折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
部分網(wǎng)站允許空白referer的防盜鏈圖片的js破解代碼
主要是有些網(wǎng)站的圖片調(diào)用是防盜鏈的但一般只是判斷referer是不是自己網(wǎng)站，如果referer為空也會顯示圖片，所以有了下面的代碼。2011-05-05
這篇文章主要介紹了JS解析XML文件和XML字符串詳解，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
JavaScript中介者模式是一種行為型設計模式,用于降低多個對象之間的耦合性,在中介者模式中,多個對象之間不直接相互通信,而是通過中介者進行通信, 本文就來給大家詳細的介紹一下JS設計模式之中介者模式使用方法,需要的朋友可以參考下2023-08-08
詰屈聱牙之javascript中國象棋...2007-04-04
js字符串中出現(xiàn)任何< >標簽都可以，就是不能出現(xiàn)</script>標簽。2009-02-02
MUI 實現(xiàn)側(cè)滑菜單及其主體部分上下滑動的方法
下面小編就為大家分享一篇MUI 實現(xiàn)側(cè)滑菜單及其主體部分上下滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了js瀑布流布局的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了Jquery對數(shù)組的操作技巧,需要的朋友可以參考下2014-03-03
JavaScript TypeScript實現(xiàn)貪吃蛇游戲完整詳細流程
這篇文章主要介紹了JavaScript TypeScript實現(xiàn)貪吃蛇游戲流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04