简介
clustergrammer-gl 是一个基于 WebGL 技术的聚类热图可视化工具，能够对多维数据进行快速可视化。它是 clustergrammer 的改进版，接口更加简单易用，更易于自定义样式和数据格式，被广泛应用于生物医学研究等领域。
安装
首先，在项目目录下使用命令行工具安装 clustergrammer-gl：
npm install clustergrammer-gl
安装成功后，在 JavaScript 中引用该包：
import ClustergrammerGL from 'clustergrammer-gl';
数据格式
clustergrammer-gl 支持多种数据格式，包括 JSON、CSV、TSV 等。以下是一个简单的 JSON 数据示例：
-- -------------------- ---- -------
-
------------ -
-------- --------
-------- --------
-------- -------
--
------------ -
-------- --------
-------- --------
-------- -------
--
-------- -
---------- -- --------- -- -------- ---
---------- -- --------- -- -------- ---
---------- -- --------- -- -------- ---
---------- -- --------- -- -------- ---
---------- -- --------- -- -------- ---
---------- -- --------- -- -------- --
-
-其中，row_nodes 和 col_nodes 分别表示行节点和列节点，links 表示链接关系。
使用
以下是一个简单的使用示例：
-- -------------------- ---- ------- ------ ---------------- ---- -------------------- ----- ---- - ---------- ----- -------------- - ------------------------------------------ - ----- -- ---- ----------- ----- ------ ---- ------- ------------ ------ ----------- ---- -------------- ----- ---- ---
其中，data 参数表示数据，#clustergrammer 是容器的选择器（clustergrammer-gl 将会将图表渲染到该容器中），dendrogram 是控制树状图的开关，enable_zoom 是控制滚轮缩放的开关，left_space 是左侧边栏的宽度，outer_margins 是控制边距的参数。
使用 set_data 方法可以更新数据：
clustergrammer.set_data(YOUR_NEW_DATA);
以下是一个完整的示例代码：
-- -------------------- ---- ------- ------ ---------------- ---- -------------------- ----- ---- - ---------- ----- -------------- - ------------------------------------------ - ----- -- ---- ----------- ----- ------ ---- ------- ------------ ------ ----------- ---- -------------- ----- ---- --- -- ---- ------------- -- - ----- -------- - -------------- ---------------------------------- -- ------
结论
clustergrammer-gl 是一个非常实用的聚类热图可视化工具，它具有良好的可定制化性和易用性，能够帮助我们快速进行数据探索和分析，是前端开发人员不可多得的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61215