简介
hexagon-heatmap-d3 是基于 D3.js 和 Hexbin.js 实现的一个用来呈现热力图或者密度图的 JavaScript 库。它支持 hexagon 和 rectangle 两种形状的网格，并且可以自定义颜色和样式。如果你需要在你的网页或者应用程序中展示一些基于数据的热力图或者密度图，那么 hexagon-heatmap-d3 是一个不错的选择。
安装
hexagon-heatmap-d3 是一个基于 npm 包的 JavaScript 库。你可以使用 npm 或者 yarn 来安装它：
npm install hexagon-heatmap-d3
yarn add hexagon-heatmap-d3
安装完成之后，你就可以在你的项目中使用 hexagon-heatmap-d3 了。
快速开始
下面是一个基本的使用示例，它使用 hexagon-heatmap-d3 来呈现一些随机生成的数据的热力图：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------- ----------
-------
---- -
------- --
-------- --
-
--------
-------
------
------- ---------------------------------------------
------- ------------------------------------------------------
------- --------------------------------------------------------------------------
--------
----- ---- - ----------------------------- -
------ -------------- - ---- ------------- - -----
---
----- ------- - ----------------------------
-----------
---------------------
--------------------- -------
----------------- -----
-----------
--------
--------------------------------- ---------- -
-----------------
---
---------
---- -------------------
-------
-------首先，我们在 HTML 中引用了 D3.js 和 Hexbin.js 两个 JavaScript 库。然后，我们引用了 hexagon-heatmap-d3 库，并且创建了一个随机生成的数据，用来呈现热力图。接着，我们使用 HexagonHeatmapD3() 函数创建了一个热力图实例，并且传入了一些参数来配置它。最后，我们将热力图实例插入到了 HTML 中，这样就可以在网页中看到热力图了。
参数配置
HexagonHeatmapD3() 函数有以下参数可以配置：
selector: 选择器。用来指定热力图要插入到哪个 DOM 元素中。例如：'#heatmap'。
width: 宽度。用来指定热力图的宽度。默认值为选择器所匹配的 DOM 元素的宽度。
height: 高度。用来指定热力图的高度。默认值为选择器所匹配的 DOM 元素的高度。
margin: 边距。用来指定热力图的边距，即左右和上下的留白像素数。默认值为 [50, 50, 50, 50]。
data: 数据。用来指定要呈现的数据。它应该是一个由数组组成的数组，其中每个数组表示一个数据点的坐标。例如：[[x1, y1], [x2, y2], ... ]。
radius: 半径。用来指定网格的半径或者宽度。默认值为 10。
gridShape: 网格形状。用来指定网格的形状，可以是 'hexagon' 或 'rectangle'。默认值为 'hexagon'。
colorRange: 颜色范围。用来指定颜色的范围。它应该是一个数组，其中第一个元素表示最小值对应的颜色，最后一个元素表示最大值对应的颜色。例如：['white', 'red']。
opacityRange: 不透明度范围。用来指定不透明度的范围。它应该是一个数组，其中第一个元素表示最小值对应的不透明度，最后一个元素表示最大值对应的不透明度。例如：[0, 1]。
blur: 模糊半径。用来指定阴影的模糊半径。默认值为 0。
stroke: 描边宽度。用来指定描边的宽度。默认值为 0。
duration: 动画时间。用来指定动画的时间长度，单位为毫秒。默认值为 500。
onClick: 点击回调函数。用来指定当用户点击一个网格时调用的回调函数。它接受一个参数，即被点击的网格对应的数据值。
自定义样式
你可以通过修改 CSS 样式来自定义热力图的样式。以下是一些常用的 CSS 类名称和对应的样式：
.hexagon-heatmap-d3-container: 用来包含整个热力图的 div 元素。
.hexagon-heatmap-d3-canvas: 用来绘制网格的 canvas 元素。
.hexagon-heatmap-d3-grid.hexagon: 用来表示完整的六边形网格的 path 元素。
.hexagon-heatmap-d3-grid.rectangle: 用来表示完整的矩形网格的 rect 元素。
.hexagon-heatmap-d3-grid.hexagon.selected: 用来表示被选中的六边形网格的 path 元素。
.hexagon-heatmap-d3-grid.rectangle.selected: 用来表示被选中的矩形网格的 rect 元素。
总结
hexagon-heatmap-d3 是一个非常方便易用的 JavaScript 库，它可以让你快速地呈现热力图和密度图。它支持各种自定义的配置和样式，并且可以与 D3.js 和 Hexbin.js 等其他库一起使用。希望本文的使用教程能够帮助你更好地使用 hexagon-heatmap-d3。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86e1