简介
React-sunburst-d3-v4 是基于 D3.js 和 React.js 开发的可视化库，用于创建 Sunburst 图表。可以适用于前端数据可视化开发中的数据探索、故事叙述等方面。该库提供了基于 React 的组件封装以及可配置的默认样式，可以快速地集成到 React 项目中。
安装
使用 npm 安装 react-sunburst-d3-v4：
npm i react-sunburst-d3-v4 --save
在使用前需要引入 D3.js 和 React.js（可在项目中使用 cdn 的方式引入），例如：
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.production.min.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
使用
react-sunburst-d3-v4 提供了一个 Sunburst 组件，可以直接引入使用。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------------------
----- ---- - -
----- -------
--------- -
- ----- ---- ----- -- --
- ----- ---- --------- -
- ----- ----- ----- - --
- ----- ----- ----- - -
-
--
- ----- ---- ----- - -
-
--
----- ----------- - -- -- -
--------- ----------- ----------- ------------ --
--Sunburst 组件接收一个 data 属性，表示 Sunburst 图表的数据。数据格式为 D3.js hierarchy 的数据结构，例如：
-- -------------------- ---- -------
-
----- -------
--------- -
- ----- ---- ----- -- --
- ----- ---- --------- -
- ----- ----- ----- - --
- ----- ----- ----- - -
-
--
- ----- ---- ----- - -
-
-Sunburst 组件也可以传递 width 和 height 属性，分别表示图表的宽度和高度。默认情况下，宽度为 400，高度为 400。
深入
数据格式
Sunburst 图表的数据格式为 D3.js hierarchy 的数据结构。该结构通过 D3.js 的 hierarchy() 方法进行创建，例如：
d3.hierarchy(data, d => d.children)
其中，data 表示需要转换的原始数据，d => d.children 表示遍历数据时使用的 children 访问器函数（如果数据中的子节点不是使用 children 字段表示，需要指定 children 字段的名称）。
对于 hierarchy 的数据结构，每个节点都有以下属性：
- data: 节点的数据
- depth: 节点的深度
- height: 节点的高度（离叶子节点最远的距离）
- parent: 节点的父节点（如果为根节点则为 null）
- children: 节点的子节点
- value: 节点的值（如果没有子节点则为节点数据中的值，如果有子节点则为子节点 value 值的和）
配置项
Sunburst 组件提供了一些属性可以进行配置，例如：
-- -------------------- ---- ------- --------- ----------- ----------- ------------ --------------------------------- ------------------ --------------------- -------------------- -- ------ ------------------- ------------------ --
- data: 数据，同上
- width: 宽度，默认 400
- height: 高度，默认 400
- colorScheme: 颜色方案，默认 d3.schemeCategory10
- excludeRoot: 是否排除根节点，默认 false
- onClick: 点击事件处理函数，接收参数 (event, data)
- tooltipContent: 提示框内容，可以是 html 字符串或返回 html 字符串的函数，接收参数 data
- tooltipDelay: 提示框延迟关闭时间，默认 500 毫秒
更多配置项可以参考源码。
样式定制
Sunburst 组件提供了默认样式，可以通过调整 colorScheme 属性来改变颜色方案。
如果需要自定义样式，可以通过 CSS 进行。对于默认情况下的 Sunburst 组件，每个节点对应一个 SVG 元素，可以通过设置对应的 class 名称来添加样式。例如：
-- -------------------- ---- ------- -------------- - ----- ------------ ------- ----- ------------- ---- - -------------------- - ----- ----- -
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -- -- ---- -----
------ -------- ---- -----------------------
----- ---- - -
----- -------
--------- -
- ----- ---- ----- -- --
- ----- ---- --------- -
- ----- ----- ----- - --
- ----- ----- ----- - -
-
--
- ----- ---- ----- - -
-
--
----- ----------- - ---------------------
----- ----------- - ------- ----- -- -
-------------------- ------
--
----- -------------- - ---- -- -
----- ---- - ---------------
----- ----- - -------------- -- -----------
------ ------------------------- ------------
--
----- ------------ - -----
----- ----------- - -- -- -
---------
-----------
-----------
------------
-------------------------
-------------------
---------------------
-------------------------------
---------------------------
--
--结语
通过本文，您应
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe181e8991b448dd7e6