简介
@arclamp/sunburst-chart 是一款基于 D3.js 的可定制化 sunburst 图表生成工具，能够帮助前端开发人员快速生成直观、美观的 sunburst 图表。该工具提供了多种配置选项，可以根据需要自由定制图表的样式和行为。
安装
使用 npm 进行安装：
npm install @arclamp/sunburst-chart
示例
以下示例演示如何使用 @arclamp/sunburst-chart 基于给定的数据生成一张 sunburst 图表。在这个例子中，我们将使用一个包含文件夹和文件的内部资源结构作为数据源。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- -------- -------------
-------
------
---- -----------------
------- ---------------------------------------------
------- -------------------------------------------------------------------
--------
--- ---- - -
------- -------
----------- -
-
------- ----------
----------- -
-------- -------- -------- ----
-------- -------- -------- ----
-------- -------- -------- ---
-
--
-
------- ----------
----------- -
-------- -------- -------- ---
-------- -------- -------- ----
-------- -------- -------- ---
-
--
-
------- ----------
----------- -
-------- -------- -------- ----
-------- -------- -------- ----
-------- -------- -------- ----
-------- --------- -------- ---
-
-
-
--
--- ------ - -
---------- ---------
------ ----
------- ---
--
--- -------- - --- ------------------- --------
------------------
---------
-------
-------这段代码为您提供了一个基本的 sunburst 图表展示页面。在此处，我们将数据源定义为一个包含有三个文件夹的资源树，每个文件夹中包含若干文件。在配置中我们定义了容器的大小，接着我们创建了一个 sunburst 实例，使用给定的数据和配置对其进行初始化。
配置选项
您可以在实例化 sunburstchart 对象时通过传递一个包含以下属性的配置对象来对 sunburst 图表进行自定义配置：
| 属性 | 默认值 | 说明 |
|---|---|---|
| data | null | 图表数据源 |
| container | null | 包含图表的 DOM 容器元素，如 "#chart" 或 ".chart" 等 |
| width | 600 | 图表区域宽度 |
| height | 600 | 图表区域高度 |
| duration | 750 | 转换时间 |
| radius | null | 饼图半径。若未指定，将自动计算以适配容器尺寸。 |
| colorScheme | d3.schemeCategory10 | 投影的颜色刻度 |
| depth | 1 | 初始深度 |
| tooltip | true | 是否启用鼠标提示 |
| tooltipFormat | null | 鼠标提示文本格式化函数，函数接收 node 数据对象作为参数 |
| zoomable | true | 是否启用鼠标缩放 |
| onClick | null | 点击事件回调函数 |
API 方法
以下是该库提供的几种可供您调用的 API 方法：
render()
渲染 sunburst 图表。调用该方法以生成图表。
sunburst.render();
update(data)
用新的数据源更新图表。您在图表上进行交互（例如缩放），而想要使用新的数据更新它时，该方法将非常有用。
sunburst.update(newData);
setDepth(depth)
设定当前显示深度，该功能将使您能够控制图表初始节点的深度，以及在交互时缩放到的深度。解决节点深度过大或占用过多空间的问题。
sunburst.setDepth(2);
您可以通过看 /example/index.html，或者在 /src/SunburstChart.ts 中查看完整的 API 文档来 get 帮助
结论
@arclamp/sunburst-chart 是一款开源的、易于使用的 sunburst 图表生成工具。采用 D3.js 实现，为前端开发人员提供了一种生成可定制 sunburst 图表的解决方案。不仅如此，它还提供了丰富的配置选项和 API 方法，使您可以轻松地根据本式需要自定义您的图表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733c890c4f7277583508