前端开发常常需要数据可视化的能力，而数据可视化的重要组成部分就是图表。有很多成熟的图表库可供选择，D3.js就是其中很有代表性的一种。在D3.js的基础上，还有很多优秀的npm包，比如d3-loom，今天我们就来详细介绍一下d3-loom。
一、d3-loom简介
d3-loom是D3.js的一个布局模块，能够绘制纬线图（Loom），是一种非常适合处理大量分类数据的可视化图表类型。
通过将输入数组映射到一个缠绕着圆环的平面，“纬线图”（Loom）展现出了不同状态之间的交互效果。d3-loom的主要目的是帮助可视化如人际关系、网络拓扑、文本等方面的数据，常常被用于客户关系管理、社交网络分析、邮件通讯等。
二、d3-loom编写流程
安装d3-loom
使用npm进行安装
npm install d3-loom --save
导入d3-loom
在js文件的头部导入d3-loom模块，并打印版本信息。
const d3Loom = require('d3-loom');
console.log('d3Loom version:', d3Loom.version);创建画布
在HTML中创建一个SVG元素，并从JS文件中获取它。
<svg width='1000' height='1000'></svg>
const svg = d3.select('svg');数据处理
在D3.js中，将数据输入的元素称为域(domain)，输出到坐标系中的元素称为值(range)。对数据进行处理前，首先针对输入数据设置已知的域。
在这里我们设定的域共有4种状态：
const status = ['online', 'offline', 'busy', 'away'];
以及6个不同的类别：
const categories = ['北京', '上海', '广州', '深圳', '杭州', '西安'];
为了处理数据，我们创建了两个数组。第一个数组是一个长度为categories的数组，数组的元素是一个长度为status的数组。而第二个数组则是一个包含类别和对应状态的数组。
-- -------------------- ---- -------
----- ---- - ------------------ -- -- -
------ -------------- -- -- --
--------- --
------- --
------ -----------------------------
----
------------- -- -- -------------
----- ------ - --------------- -- -- -
-- ---------------- -
------------- - ---
-
----------------------- - --------
------ --
-- ----
------------------- ------- --------在这里我们使用了函数式编程的语法，利用JavaScript的高阶函数实现数据的处理。在data数组中，我们使用了map和reduce函数，以获取可用于输入绘图的数据。
绘制loom图
在将数据传入loom之前，我们需要初始化一些基本的绘图信息，如项目中矩形单元的尺寸、元素之间距离的间隔和动画在哪个地方。
-- -------------------- ---- -------
----- ---- - --------
--------------
----------------
------------- -- --------
--------------- -- -- ------------------------ ------------
------------------ -- -- -------- - ---------
------------- -- -- ------------------------ -------------
----- ---------- - -------------这段代码非常重要，它定义了loom图的构造函数，指定了参数并返回一个生成的函数loom。初始化参数中包括极角padding、极径distance以及某些分组和排序方式。此后，我们将布局函数应用于其中的数据，以获得可用于绘制的矩阵数据格式。
-- -------------------- ---- -------
----- ----------- - -----------------------
----- ----------- - -----------------------
----- --- - --------
-------------------------
--------------------------
----- ------ - -----------
-------------- -- --------------
-------------- -- ---------------上面的代码片段开始绘制loom图，它使用d3.ribbon()定义了一条基于径向的带状路径，并使用一个d3.arc()函数定义了矩形元素之间的曲线的形状。
使用loom函数计算生成了很多条带状-区块状元素的路径。这些路径通过D3.js的选择器源进行进行可视化绘制。
在这里，我们使用D3.js的select()函数选择SVG元素，并使用d3Loom()函数返回的loom的路径属性来设置路径的样式。
-- -------------------- ---- -------
----- ---- - ---------------------
------------------------
-----------------------
---------- ----
-------------- -------------
-------------- - -- --------
----------------- -----
-----------------------------
-----------------
-----------------------
---------- -------
-------------- --------------
----------------- ----
---------------- - -- --------
------------------------ - -- ----
-------------- --------除了上面绘图的设置路径样式之外，我们还通过设置一些样式，如stroke、opacity等，来完成loom图的绘制。
三、d3-loom使用实例
在前文的编写流程中，我们已经详细介绍了如何使用d3-loom，下面我们通过一个实例加深印象。
-- -------------------- ---- -------
----- ------ - -------------------
----- -- - --------------
------------------- ---------- ----------------
----- --- - -----------------
----- ------ - ---------- ---------- ------- --------
----- ---------- - ------ ----- ----- ----- ----- ------
----- ---- - ------------------ -- -- -
------ -------------- -- -- --
--------- --
------- --
------ -----------------------------
----
------------- -- -- -------------
----- ------ - --------------- -- -- -
-- ---------------- -
------------- - ---
-
----------------------- - --------
------ --
-- ----
------------------- ------- --------
----- ---- - --------
--------------
----------------
------------- -- --------
--------------- -- -- ------------------------ ------------
------------------ -- -- -------- - ---------
------------- -- -- ------------------------ -------------
----- ---------- - -------------
----- ----------- - -----------------------
----- ----------- - -----------------------
----- --- - --------
-------------------------
--------------------------
----- ------ - -----------
-------------- -- --------------
-------------- -- ---------------
----- ---- - ---------------------
------------------------
-----------------------
---------- ----
-------------- -------------
-------------- - -- --------
----------------- -----
-----------------------------
-----------------
-----------------------
---------- -------
-------------- --------------
----------------- ----
---------------- - -- --------
------------------------ - -- ----
-------------- --------在这个实例中，我们首先初始化了需要绘制的SVG元素，然后使用了高级函数迅速处理输入的数据。同时，我们使用d3Loom生成者产生极角padding和对数线图像，用于构建loom图的绘制基础。
最后，我们凭借loomLayout带有内外半径信息和相邻元素之间的连线点信息，绘制了具体的loom图。
四、d3-loom的指导意义
d3-loom是一种非常实用的数据可视化类型，它主要帮助人们更好的理解大规模数据的含义，以及在数据分析过程中底层的归纳推理过程。
从一个基于对象的角度来看，d3-loom给出了如何将状态数据归集到一个可识别的形式，这在数据处理过程中非常重要。因此，当我们使用d3-loom构建自己的图表时，首先需要思考数据规范化的细节。
此外，d3-loom还可以帮助我们更好地理解不同数据分类之间的关系和对比，方便更好地进行后续统计和分析工作。另外，d3-loom图表的可视易懂也是构建优质数据图表的一个重要指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb681e8991b448dc62f