D3.js实现绘制折线图的教程详解

本章我们来实现一下折线图，有了画柱状图的经验，我们可以快速的分析出柱状图和折线图的区别主要是x轴比例尺和绘制数据图形,其余的画布，坐标轴等，本章就不过多的讲解了。

点击查看demo

x轴比例尺

根据折线图x轴的特点，可以分析出我们需要在x轴画出间隔相同的N的点,所以我们采用scalePoint。

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

如果使用scaleBand就会是下图的效果，刻度和数据点不能对齐。

数据折线

D3提供了一些图形构造器，例如d3.line,d3.area,d3.arc,d3.pie等，本章借着折线图，我们介绍一下d3.line和d3.area。

d3.line

通过点位的二维数组自动生成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);

在实际开发中，我们基本上都是需要通过x轴和y轴的比例尺去计算，每个数据对应点的位置信息。

圆滑的曲线

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，因为只需要一条折线，而且需要在这条折线上生成所有的数据的点位以构成path路径，如果忘了datum和data的区别，可以回顾一下DataJoin。

d3.area

除了可以绘制一条折线，我们还可以绘制一个填充的折线区域，这也是比较常见的使用场景，这就需要用到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);

来源：https://juejin.cn/post/7162720725801893901