D3.js|D3.js svg绘制折线图
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
原理：
1、如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺（Scale）了。
2、定义域与值域
在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。
3、两种比例尺
①线性比例尺：
文章图片
其中，d3.scale.linear() 返回一个线性比例尺，返回值可以当做函数来使用的。domain() 和 range() 分别设定比例尺的定义域和值域。
注意：V4 版本改变了写法，应该是 var linear = d3.scaleLinear(); 。
在这里还用到了两个函数，它们经常与比例尺一起出现：
1.d3.max()
2.d3.min()
这两个函数能够求数组的最大值和最小值，是 D3 提供的。
②序数比例尺：
如果，定义域和值域不一定是连续的，都是离散的。那就要用到序数比例尺了。
【D3.js|D3.js svg绘制折线图】
文章图片
推荐阅读
- Python绘制小红花
- OpenGL|OpenGL 绘制甜甜圈深度测试、多边形偏移、裁剪、 混合
- 把知识编成网纺成布
- 4.24|4.24 使用形状生成器工具绘制星形图标 [Illustrator CC教程]
- Android|Android View 的绘制流程 03 - performLayout
- python|Python绘制冬奥吉祥物“冰墩墩”
- canvas|canvas 入门
- opencv|Qt+OpenCV联合开发（十六）--图像几何形状绘制
- QT（在QLabel中绘制背景透明的框线）
- 妙啊！用Jetpack Compose绘制出可爱的天气动画！