Sunburst-chart-js 是一个基于 JavaScript 的 npm 包，能够通过在网页中绘制出漂亮的 sunburst 图表。Sunburst 图可以让用户更好地理解层次结构和关系，非常适合用于数据可视化场景。本文将介绍 sunburst-chart-js 的基本使用方法，如何配置图表的样式、文本显示、以及如何使用回调函数实现一些自定义的交互。
安装 sunburst-chart-js
要使用 sunburst-chart-js 进行开发，首先需要将其安装到项目中：
npm install sunburst-chart-js --save
安装完毕后就可以在代码中 import 或 require sunburst-chart-js 模块了。
创建一个简单的 sunburst 图表
下面的代码片段演示了如何创建一个最简单的 sunburst 图表，它只有两层节点，用不同的颜色表示：
-- -------------------- ---- -------
------ - -------- - ---- --------------------
----- ---- - -
----- -------
--------- -
- ----- ---- ----- --- --
- ----- ---- ----- --- --
--
--
----- -------- - --- ----------
-----
------ ----
------- ----
----------- -------------------------------------
-------- --- -- ------ --------------- ----- ----------------
---上述代码创建了一个 Sunburst 实例，传入了一些配置参数。其中，data 表示 sunburst 图的数据，必须按照一定的格式组织。这里的 data 是一个包含根节点名字和子节点数组的对象。每个子节点也应该是一个对象，至少应该包含一个名称字段 name，还可以包含其他自定义字段，如上例中的 size。如果不需要为节点设置大小、颜色等其他属性，则可以直接传一个数组，sunburst-chart-js 会自动使用默认值。例如：
const data = [
{ name: 'A', children: [{ name: 'A1', size: 50 }, { name: 'A2', size: 50 }] },
{ name: 'B', children: [{ name: 'B1', size: 50 }, { name: 'B2', size: 50 }] },
];width 和 height 参数分别表示了 sunburst 图的宽度和高度，colorScale 参数是用于给节点分配颜色的 d3.scale，这里传入了一个内置的颜色序列。tooltip 参数是一个回调函数，用于在鼠标悬停在节点上时显示 tooltip，本例中是显示节点名称和大小。
最后，将 sunburst 对象插入到文档中即可显示图表：
d3.select('.chart-container')
.append(() => sunburst.render());配置图表样式
sunburst-chart-js 允许用户配置许多方面的图表样式，包括背景颜色、文本字体和颜色、节点半径、边框宽度等等。下面举几个例子：
-- -------------------- ---- ------- --- ---------- ----- ------ ---- ------- ---- ---------------- ---------- ------------ ----------------------------------------- --------------- ------ ------------ --- -- -------- --- - - - - --- ------------ ------- ----------- ----- ------------ --- -- ------------ -------------- --- ----------- ------- ---
上述代码中，backgroundColor 参数设置了 sunburst 图的背景颜色，radiusScale 参数设置了节点的半径大小与节点数据大小之间的映射函数，这里使用的是幂函数映射，指数为 0.5，表示节点大小与半径的关系应该是平方根关系。borderWidth 和 borderColor 参数分别指定了节点的边框宽度和颜色。showLabels、labelFormat、labelFontSize 和 labelColor 参数可以控制 sunburst 图的标签显示效果，文本的格式、字体大小和颜色等都可以自定义。
实现交互
sunburst-chart-js 还支持配置交互行为，例如：点击节点展开或关闭它的子节点、鼠标悬浮在节点上时高亮它的所有父节点等。这些交互功能都可以通过配置回调函数来实现。下面的代码片段演示了如何实现基本的点击展开行为：
const sunburst = new Sunburst({
...
onSliceClick: (d) => {
sunburst.toggle(d);
},
});这里定义了一个 onSliceClick 回调函数，用于在节点被点击（激活）时调用。该函数可能有一个参数 d，表示被点击的节点信息。在该回调函数中，调用 sunburst.toggle(d) 会将该节点的子节点展开或者关闭（如果已经是展开状态）。实现该函数需要在 Sunburst 类外部定义一个 Sunburst 实例对象 sunburst，使得该对象能在回调函数中被引用。
示例代码
下面是一个包含完整配置的 sunburst 图表示例代码：
-- -------------------- ---- -------
------ - -------- - ---- --------------------
----- ---- - -
----- -------
--------- -
- ----- ---- --------- -- ----- ----- ----- -- -- - ----- ----- ----- -- -- --
- ----- ---- --------- -- ----- ----- ----- -- -- - ----- ----- ----- -- -- --
--
--
----- -------- - --- ----------
-----
---------------- ----------
------ ----
------- ----
----------- -------------------------------------
------------ ----------------------------------------- --------------- ------
------- --- -- ------------
-------- --- -- ------ --------------- ----- ----------------
------------- --- -- -
-------------------
--
---
-----------------------------
---------- -- -------------------该示例代码将会生成一个包含两层节点的 sunburst 图表，带有节点名称、大小、颜色等信息，支持点击节点展开子节点的交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ffc81e8991b448ddcbe