用Heatmap.js画热力图，勇敢地迈出第一步哇咔咔

yzd的热力图出了点问题，学长让我试着画一画看，hearmip.js是一个轮子，用来画热力图的，要使用的先到官网上下载一个js文件，然后传入容器和数据，就会自动生成一张canvas画布显示到网页上。

听起来很简单，愚蠢的我画了一天。

1． 刚开始一直画在svg标签下，永远在报错的路上，

2． 后来照着官网打，随机生成数据在网页上呈现热力图，终于发现heatmap.js运行完后自动生成的是csv画布，然后修改代码。

3． 开始想用d3生成div再画图，然后发现用了div也出现不了热力图。回过头去找例子和自己代码的区别，最后还是学长告诉的：数据里的值的类型必须要是int型，(在这之前只发现了value要是int，没有改x和y所以一直不能成功)

4． 后来热力图画出来之后发现交互出现问题，点击几次之后，按钮会往上走，然后决定把div写到body里。终于画出图之后拿给学长看，发现红色区域太多了，被学长叫去看API，修改参数看是否能够调整，调了很久之后发现不能。真的好难受当时觉得好痛苦，没有最终的效果，只能凭借？艺术细胞然后一直看效果看效果一直试一直试，后来用了个聪明点的办法，把数据集复制下来一次性多画几个，差别还是有的，但都太红了，叉掉，后来还是学长拯救的愚蠢的我kjj？

（最开始画出来半个太阳，整个太阳…，忘记截图了，，后来截图是因为调参数调烦了和朋友吐槽，在没有得到正确效果之前其实我觉得我画的非常好看来着的…）

这张的话，我想要用白色看看我之前画的图究竟多红，然后，我输了，真的很红…

5． 然后学长给提示说把数据输出出来看看，输出数据之后发现如果用官网上的setdata方法的话,heatmap.js没有更新max的值，导致很多value值不在范围内(因为所给value的值相差极小，所以用比例尺减少类型转换带来的误差，所以出错的地方就有两个可能),后来试着输出了一下比例尺转换后的数据，没问题，那就是heatmap.js出的问题，然后就用了里面的addData方法，刚开始用空的数据集，然后一个一个把数据传进去，生成结果如下。

参数调整
Possible configuration properties:
container (DOMNode) required
A DOM node where the heatmap canvas should be appended (heatmap will adapt to the node’s size)
backgroundColor (string) optional
A background color string in form of hexcode, color name, or rgb(a)
gradient (object) optional
An object that represents the gradient (syntax: number string [0,1] : color string), check out the example
radius (number) optional
The radius each datapoint will have (if not specified on the datapoint itself)
opacity (number) [0,1] optional default = .6
A global opacity for the whole heatmap. This overrides maxOpacity and minOpacity if set!
maxOpacity (number) [0,1] optional
The maximal opacity the highest value in the heatmap will have. (will be overridden if opacity set)
minOpacity(number) [0,1] optional
The minimum opacity the lowest value in the heatmap will have (will be overridden if opacity set)
onExtremaChange function callback
Pass a callback to receive extrema change updates. Useful for DOM legends.
blur (number) [0,1] optional default = 0.85
The blur factor that will be applied to all datapoints. The higher the blur factor is, the smoother the gradients will be
xField (string) optional default = “x”
The property name of your x coordinate in a datapoint
yField (string) optional default = “y”
The property name of your y coordinate in a datapoint
valueField (string) optional default = “value”
The property name of your y coordinate in a datapoint

然后可以参考下面这些网站里面对我上面说的heatmap例子的解释：
官网：https://www.patrick-wied.at/static/heatmapjs/
API：https://www.patrick-wied.at/static/heatmapjs/docs.html
我安利这个：https://www.jianshu.com/p/5f51ef10aeb7
看不懂上面这个可以先看这个：https://blog.****.net/qq_32447301/article/details/78844524