如何用D3.js详细教程绘制一个精美的长尾词折线图？

本文共计1111个文字，预计阅读时间需要5分钟。

D3.js 绘制折线图的教程详解- 目录 - 折线图基础 - 数据准备 - 使用 d3.lined3.area 绘制折线图 - 水平方向与垂直方向 - 总结 - 实现折线图，绘制经验分享

D3.js实现绘制折线图的教程详解-目录x轴比例尺数据折线d3.lined3.area水平方向垂直方向总结本章我们来实现一下折线图，有了画柱状图的经验，我们可以快速的分析出柱状图和

目录

• x轴比例尺
• 数据折线
• d3.line
• d3.area
• 水平方向
• 垂直方向
• 总结

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

点击查看demo

x轴比例尺

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

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

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