@@ -3,35 +3,185 @@ title: kde
33order : 2
44---
55
6- 对指定的数据，进行核密度算法（Kernel Density Estimation）处理，底层使用开源库 [ pdfast] ( https://www.npmjs.com/package/pdfast ) 。
7-
8- ## 开始使用
9-
10- ``` ts
11- chart .data ({
12- type: ' inline'
13- value: data ,
14- transform: [
15- {
16- type: ' kde'
17- field: ' y'
18- groupBy: [' x' ' species'
19- as: [' y' ' size'
6+ ## 概述
7+
8+ 核密度估计（Kernel Density Estimation，简称 KDE）是一种非参数统计方法，用于估计随机变量的概率密度函数。在 G2 中，KDE 数据转换可以对指定的数据进行核密度算法处理，生成概率密度函数（PDF）数据，底层使用开源库 [ pdfast] ( https://www.npmjs.com/package/pdfast ) ，该库使用三角形核函数，优化为 O(N + K) 时间复杂度。
9+
10+ 在数据处理后，数据会增加两个字段（默认为 ` y ` 和 ` size ` ），均为数组类型，用于表示密度分布的点和对应的密度值。
11+
12+ ## 使用场景
13+
14+ 1 . ** 密度图（Density Plot）** ：展示数据分布的连续估计，比直方图更平滑地展示数据分布。
15+
16+ 2 . ** 小提琴图（Violin Plot）** ：结合箱线图和密度图的特点，既可以展示数据的分布形状，又能显示关键统计信息。
17+
18+ 3 . ** 多组数据分布比较** ：通过 ` groupBy ` 参数，可以同时展示和比较多个分组的数据分布情况。
19+
20+ 4 . ** 平滑的数据可视化** ：当需要对离散数据点进行平滑处理，展示其整体趋势和分布时。
21+
22+ 5 . ** 不同坐标系下的密度分析** ：可以在直角坐标系或极坐标系中应用，创建不同视角的数据分布可视化。
23+
24+ ## 配置项
25+
26+ | 属性 | 描述 | 类型 | 默认值 | 必选 |
27+ | ------- | -------------------------------------------------------------- | ------------------ | --------------- | ---- |
28+ | field | 进行核密度算法的数据字段 | ` string ` | - | 是 |
29+ | groupBy | 对数据进行分组的分组字段，可以指定多个 | ` string[] ` | - | 是 |
30+ | as | 进行 KDE 处理之后，存储的字段 | ` [string, string] ` | ` ['y', 'size'] ` | 否 |
31+ | min | 指定处理范围的最小值 | ` number ` | 数据最小值 | 否 |
32+ | max | 指定处理范围的最大值 | ` number ` | 数据最大值 | 否 |
33+ | size | 算法最终生成数据的条数，值越大密度曲线越精细 | ` number ` | ` 10 ` | 否 |
34+ | width | 确定一个元素左右影响多少点，类似于 bandWidth，值越大曲线越平滑 | ` number ` | ` 2 ` | 否 |
35+
36+ ### 复杂类型说明
37+
38+ - ** as** ：指定 KDE 处理后生成的两个字段名，第一个字段存储 x 值（即数据点的位置），第二个字段存储 y 值（即对应的密度值）。这两个字段都是数组类型，长度由 ` size ` 参数决定。
39+
40+ ### 参数调整效果
41+
42+ - ** size** ：该参数决定了生成的密度曲线的精细程度。值越大，生成的点越多，密度曲线越精细。在示例中可以看到从默认的 10 增加到 20 或 30 的效果。
43+
44+ - ** width** ：该参数控制密度曲线的平滑程度，类似于核密度估计中的带宽参数。值越大，曲线越平滑，但可能会丢失一些细节。
45+
46+ ## 示例
47+
48+ ### 基础密度图
49+
50+ 下面的示例展示了如何创建基本的密度图，展示不同物种的数据分布：
51+
52+ ``` js | ob
53+ (() => {
54+ const chart = new G2.Chart ();
55+ chart .options ({
56+ type: ' density' // 设置图表类型为密度图
57+ data: {
58+ type: ' fetch' // 指定数据类型为通过网络获取
59+ value: ' https://assets.antv.antgroup.com/g2/species.json' // 设置数据的 URL 地址
60+ transform: [
61+ {
62+ type: ' kde' // 使用核密度估计（KDE）进行数据转换
63+ field: ' y' // 指定 KDE 计算的字段为 'y'
64+ groupBy: [' x' ' species' // 按 'x' 和 'species' 字段对数据进行分组
65+ size: 20 , // 生成 20 个数据点表示概率密度函数
66+ },
67+ ],
2068 },
21- ],
22- });
69+ encode: {
70+ x: ' x' // 将 'x' 字段映射到 x 轴
71+ y: ' y' // 将 'y' 字段映射到 y 轴
72+ color: ' species' // 将 'species' 字段映射到颜色
73+ size: ' size' // 将 'size' 字段映射到图形大小
74+ },
75+ tooltip: false , // 关闭图表的 tooltip 功能
76+ });
77+ chart .render ();
78+ return chart .getContainer ();
79+ })();
80+ ```
81+
82+ 在这个示例中，我们将 ` size ` 参数设置为 20，比默认值 10 更大，从而获得更精细的密度曲线。
83+
84+ ### 极坐标系中的小提琴图
85+
86+ 在极坐标系中使用 KDE 可以创建环形的小提琴图，为数据分布可视化提供新的视角：
87+
88+ ``` js | ob
89+ (() => {
90+ const chart = new G2.Chart ();
91+ chart .options ({
92+ type: ' view'
93+ autoFit: true ,
94+ data: {
95+ type: ' fetch'
96+ value: ' https://assets.antv.antgroup.com/g2/species.json'
97+ },
98+ coordinate: { type: ' polar' // 设置为极坐标系
99+ children: [
100+ {
101+ type: ' density' // 密度图组件
102+ data: {
103+ transform: [{ type: ' kde' : ' y' : [' x' ' species'
104+ },
105+ encode: {
106+ x: ' x'
107+ y: ' y'
108+ series: ' species'
109+ color: ' species'
110+ size: ' size'
111+ },
112+ tooltip: false ,
113+ },
114+ {
115+ type: ' boxplot' // 箱线图组件，用于显示小提琴图
116+ encode: {
117+ x: ' x'
118+ y: ' y'
119+ series: ' species'
120+ color: ' species'
121+ shape: ' violin' // 设置形状为小提琴
122+ },
123+ style: { opacity: 0.5 , strokeOpacity: 0.5 , point: false },
124+ },
125+ ],
126+ });
127+ chart .render ();
128+ return chart .getContainer ();
129+ })();
130+ ```
131+
132+ 这个示例展示了如何将 KDE 与箱线图结合使用，创建小提琴图。在极坐标系中，小提琴图呈环形分布，提供了不同的视角来观察数据分布。
133+
134+ ### 自定义参数的密度图
135+
136+ 通过调整 KDE 的参数，可以控制密度估计的平滑程度和精度：
137+
138+ ``` js | ob
139+ (() => {
140+ const chart = new G2.Chart ();
141+ chart .options ({
142+ type: ' density'
143+ data: {
144+ type: ' fetch'
145+ value: ' https://assets.antv.antgroup.com/g2/species.json'
146+ transform: [
147+ {
148+ type: ' kde'
149+ field: ' y'
150+ groupBy: [' x'
151+ size: 30 , // 增加采样点数量，获得更精细的密度曲线
152+ width: 3 , // 增加带宽，使曲线更平滑
153+ min: 0 , // 指定处理范围的最小值
154+ max: 8 , // 指定处理范围的最大值
155+ as: [' density_x' ' density_y' // 自定义输出字段名
156+ },
157+ ],
158+ },
159+ encode: {
160+ x: ' x'
161+ y: ' density_x' // 使用自定义的输出字段
162+ color: ' x'
163+ size: ' density_y' // 使用自定义的输出字段
164+ },
165+ tooltip: false ,
166+ });
167+ chart .render ();
168+ return chart .getContainer ();
169+ })();
23170```
24171
25- 上述例子处理之后，数据会增加 y、size 字段，均为数字数组。
172+ 这个示例展示了如何自定义 KDE 的各种参数：
173+
174+ 1 . ` size: 30 ` - 增加采样点数量，获得更精细的密度曲线
175+ 2 . ` width: 3 ` - 增加带宽，使曲线更平滑
176+ 3 . ` min: 0 ` 和 ` max: 8 ` - 指定处理范围的最小值和最大值
177+ 4 . ` as: ['density_x', 'density_y'] ` - 自定义输出字段名
178+
179+ 这些参数的调整可以帮助你获得更精细或更平滑的密度曲线，根据实际需求进行调整。
180+
181+ ## 总结
182+
183+ KDE 数据转换是 G2 中一个强大的工具，可以帮助你创建各种密度相关的可视化，如密度图和小提琴图。通过调整其参数，你可以控制密度曲线的精细度和平滑度，以满足不同的可视化需求。
26184
27- ## 选项
185+ 在不同的坐标系中使用 KDE，可以为数据分布提供不同的视角。结合其他图表类型，如箱线图，可以创建更丰富的数据可视化。
28186
29- | 属性 | 描述 | 类型 | 默认值 |
30- | -------- | -------------------------------------------------- | ---------------------------- | ------------- |
31- | field | 进行核密度算法的数据字段 | ` string ` | |
32- | groupBy | 对数据进行分组的分组字段，可以指定多个 | ` string[] ` | |
33- | as | 进行 KDE 处理之后，存储的字段 | ` [number, number] ` | ` ['y', 'size'] ` |
34- | min | 指定处理范围的最小值 | ` number ` | 数据最小值 |
35- | max | 指定处理范围的最大值 | ` number ` | 数据最小值 |
36- | size | 算法最终生成数据的条数 | ` number ` | ` 10 ` |
37- | width | 确定一个元素左右影响多少点，类似于 bandWidth | ` number ` | ` 2 ` |
187+ 更多的案例，可以查看[ 图表示例 - 小提琴图] ( /examples#general-violin ) 页面。
0 commit comments