简介
techradar 是一款基于 d3 技术实现的动态技术雷达图插件，可以帮助前端开发者更清晰地了解技术趋势和发展状况，以及快速了解最新的前端技术。
安装
使用 npm 安装 techradar：
npm install techradar
快速上手
引入
在 HTML 文件中引入 techradar：
<script src="node_modules/d3/dist/d3.min.js"></script> <script src="node_modules/techradar/dist/techradar.min.js"></script>
初始化
-- -------------------- ---- -------
--- ---- - -
-
--------- --------
----- --------
------ ----------
------- -----
----- -------------------------
--
-
--------- ---------- - ------------
----- -------
------ --------
------- -----
----- ----------------------
--
-
--------- --------
----- ---------
------ -------
------- ------
----- ---------------------
--
-
--------- ---------- - ------------
----- --------
------ ---------
------- ------
----- --------------------
-
-
--- ------- - -
------ ----
------- ----
-------------- ---
-------------- ----
--------------- -
----------
----------
----------
---------
-
-
--- --------- - --- ----------------------- ----- ---------API
构造函数
new TechRadar(selector[, data[, options]])
创建一个 TechRadar 实例，需要传入一个 CSS 选择器作为第一个参数，第二个参数为数据，第三个参数为配置项。
数据结构
TechRadar 接受的数据应该为一个数组，每一个元素用于描述一个技术项，例如：
-- -------------------- ---- -------
-
-
--------- --------
----- --------
------ ----------
------- -----
----- -------------------------
--
-
--------- ---------- - ------------
----- -------
------ --------
------- -----
----- ----------------------
-
-----
-每个元素应该包含四个属性，quadrant、ring、label 和 active。
quadrant指示这个技术项所属的象限，可以是Languages & Frameworks、Tools、Platforms或者Techniques。ring指示这个技术项在雷达图上的环，可以是Adopt、Trial、Assess或者Hold。label是这个技术项的名称。active是一个布尔值，表示这个技术项是否为当前激活状态。
link 也是一个可选属性，用于指定这个技术项的官方网站或者文档地址。
配置项
TechRadar 的配置项包含以下属性：
width：雷达图的宽度，默认为800。height：雷达图的高度，默认为600。minRingRadius：最小环的半径，单位为像素，默认为50。maxRingRadius：最大环的半径，单位为像素，默认为200。quadrantColors：四个象限的背景色分别为，数组中的第一个元素为第一象限的背景色，第二个元素为第二象限的背景色，以此类推。默认值为["#C0392B", "#2980B9", "#27AE60", "#F1C40F"]。
方法
setData(data)：重新设置数据并更新雷达图。setOptions(options)：重新设置配置项并更新雷达图。destroy()：销毁当前的雷达图实例。
示例
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -------------
----- --------------- ---------------------------- -----------------
-------
---------- -
------- - -----
-
--------
-------
------
---- ---------------------
------- ----------------------------------------------
------- ------------------------------------------------------------
--------
--- ---- - -
-
--------- --------
----- --------
------ ----------
------- -----
----- -------------------------
--
-
--------- ---------- - ------------
----- -------
------ --------
------- -----
----- ----------------------
--
-
--------- --------
----- ---------
------ -------
------- ------
----- ---------------------
--
-
--------- ---------- - ------------
----- --------
------ ---------
------- ------
----- --------------------
-
-
--- ------- - -
------ ----
------- ----
-------------- ---
-------------- ----
--------------- -
----------
----------
----------
---------
-
-
--- --------- - --- ----------------------- ----- ---------
-- ---------
--------------------- -
--- ------- - -
-
--------- --------
----- --------
------ ----------
------- -----
----- -------------------------
--
-
--------- ---------- - ------------
----- --------
------ ---------
------- ------
----- --------------------
--
-
--------- --------
----- -------
------ -------
------- -----
----- ---------------------
--
-
--------- ---------- - ------------
----- --------
------ ------ --------
------- ------
----- --------------------------
-
--
---------------------------
-- ------
-- -----------
--------------------- -
--------------------
-- -------
---------
-------
-------总结
通过这篇教程，我们能够了解到 npm 包 techradar 的安装、使用、API 和示例，并且学会了如何使用 techradar 来展示技术趋势和发展状况。希望这篇文章对广大前端开发者有所帮助，同时也希望大家能够多多研究和使用 techradar，为前端的发展贡献自己的一份力量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c081e8991b448d38bd