欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

D3.js實(shí)現(xiàn)繪制折線圖的教程詳解

 更新時(shí)間：2022年11月08日 09:22:04   作者：FinGet  
這篇文章主要為大家詳細(xì)介紹了如何通過D3.js實(shí)現(xiàn)繪制折線圖，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下

本章我們來實(shí)現(xiàn)一下折線圖，有了畫柱狀圖的經(jīng)驗(yàn)，我們可以快速的分析出柱狀圖和折線圖的區(qū)別主要是x軸比例尺和繪制數(shù)據(jù)圖形,其余的畫布，坐標(biāo)軸等，本章就不過多的講解了。

點(diǎn)擊查看demo

x軸比例尺

根據(jù)折線圖x軸的特點(diǎn)，可以分析出我們需要在x軸畫出間隔相同的N的點(diǎn),所以我們采用scalePoint。

const xScale = d3.scalePoint()
    .domain(data.map((d) => d.name))
    .range([0, dimensions.boundedWidth]);

如果使用scaleBand就會是下圖的效果，刻度和數(shù)據(jù)點(diǎn)不能對齊。

數(shù)據(jù)折線

D3提供了一些圖形構(gòu)造器，例如d3.line,d3.area,d3.arc,d3.pie等，本章借著折線圖，我們介紹一下d3.line和d3.area。

d3.line

通過點(diǎn)位的二維數(shù)組自動(dòng)生成path：

// 構(gòu)建一個(gè)默認(rèn)為直線的線條繪制器
const lineGenerator = d3.line();
// 定義一下點(diǎn)位
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);

在實(shí)際開發(fā)中，我們基本上都是需要通過x軸和y軸的比例尺去計(jì)算，每個(gè)數(shù)據(jù)對應(yīng)點(diǎn)的位置信息。

圓滑的曲線

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);
復(fù)制代碼

這里我們使用的是datum，因?yàn)橹恍枰粭l折線，而且需要在這條折線上生成所有的數(shù)據(jù)的點(diǎn)位以構(gòu)成path路徑，如果忘了datum和data的區(qū)別，可以回顧一下DataJoin。

d3.area

除了可以繪制一條折線，我們還可以繪制一個(gè)填充的折線區(qū)域，這也是比較常見的使用場景，這就需要用到d3.area。

d3.area用來設(shè)置坐標(biāo)的屬性有六個(gè)x,y,x0,y0,x1,y1，它們通常分為兩組來使用即：x, y0, y1,y, x0, x1分別代表兩個(gè)方向水平和垂直。

水平方向

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

翻譯一下：

移動(dòng)到(0,50)->繪制線到(100,200)->繪制線到(300,100)->繪制線到(400,150)

->繪制線到(400,10)->繪制線到(300,10)->繪制線到(100,10)

->繪制線到(0,10)->閉合(將起點(diǎn)與終點(diǎn)連接)

其實(shí)理解起來就像是小學(xué)的拼音連線題一樣：

垂直方向

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的特點(diǎn)是按x遞增的，垂直方向的area，points的特點(diǎn)是按y遞增的。

不排序的話，你可能會得到一個(gè)意料之外的圖形：

最后就可以完成我們的折線圖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é)

不同的圖表可能需要不同的比例尺，這個(gè)需要我們根據(jù)比例尺的特性和圖表的特征相互對照來選擇適合的比例尺。本章我們只簡單介紹了line和area的一些特性，更詳細(xì)的api還是需要參考官方文檔，最后建議打開demo調(diào)試一下，改改數(shù)據(jù)，樣式，比例尺等看看效果。

到此這篇關(guān)于D3.js實(shí)現(xiàn)繪制折線圖的教程詳解的文章就介紹到這了,更多相關(guān)D3.js繪制折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論