logo

Ant Design Charts

  • Manual
  • Options
  • Examples
  • Productsantv logo arrow
  • 2.0.0
  • Component Overview
  • Common Configuration Statistical Charts
    • Chart composition
    • Component
      • 标题(Title)
      • Axis
      • Legend
      • Scrollbar
      • Slider
      • Tooltip
      • Label
    • Core
      • Color En
      • View
      • Data
        • overview
        • custom
        • ema
        • fetch
        • filter
        • fold
        • inline
        • join
        • kde
        • log
        • map
        • pick
        • rename
        • slice
        • sort
        • sortBy
      • Scale
        • overview
        • band
        • linear
        • log
        • ordinal
        • point
        • pow
        • quantile
        • quantize
        • sqrt
        • threshold
        • time
      • Transform
        • overview
        • bin
        • binX
        • diffY
        • dodgeX
        • flexX
        • group
        • groupColor
        • groupX
        • groupY
        • jitter
        • jitterX
        • jitterY
        • normalizeY
        • pack
        • sample
        • select
        • selectX
        • selectX
        • sortColor
        • sortX
        • sortY
        • stackEnter
        • stackY
        • symmetryY
      • Coordinate
        • overview
        • fisheye
        • parallel
        • polar
        • radial
        • theta
        • transpose
        • cartesian3D
      • 样式(Style)
      • Animate
        • overview
        • fadeIn
        • fadeOut
        • growInX
        • growInY
        • morphing
        • pathIn
        • scaleInX
        • scaleInY
        • scaleOutX
        • scaleOutY
        • waveIn
        • zoomIn
        • zoomOut
      • 状态(State)
      • Interaction
        • Overview
        • brushAxisHighlight
        • brushHighlight
        • brushXHighlight
        • brushYHighlight
        • brushFilter
        • brushXFilter
        • brushYFilter
        • chartIndex
        • elementHighlight
        • elementHighlightByColor
        • elementHighlightByX
        • elementSelect
        • elementSelectByColor
        • elementSelectByX
        • fisheye
        • legendFilter
        • legendHighlight
        • poptip
        • scrollbarFilter
        • sliderFilter
      • Composition
        • overview
        • facetCircle
        • facetRect
        • repeatMatrix
        • spaceFlex
        • spaceLayer
        • timingKeyframe
      • Theme
        • overview
        • Academy
        • classic
        • classicDark
      • event
    • Specal Plot
      • Area
      • Bar
      • CirclePacking
      • DualAxes
      • Gauge
      • Line
      • Rose
      • Sankey
      • Scatter
      • Sunburst
      • Treemap
      • Venn
      • WordCloud
      • Column
      • Pie
      • BidirectionalBar
      • Box
      • Bullet
      • Funnel
      • Heatmap
      • Histogram
      • Liquid
      • Radar
      • Stock
      • Tiny
      • Violin
      • Waterfall
      • RadialBar
  • Relation Graph Components
    • Overview
    • MindMap
    • Fishbone
    • IndentedTree
    • Dendrogram
    • OrganizationChart
    • FlowGraph
    • FlowDirectionGraph
    • NetworkGraph
    • FAQ

kde

Previous
join
Next
log

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

概述

核密度估计(Kernel Density Estimation,简称 KDE)是一种非参数统计方法,用于估计随机变量的概率密度函数。在 Ant Design Charts 中,KDE 数据转换可以对指定的数据进行核密度算法处理,生成概率密度函数(PDF)数据,底层使用开源库 pdfast,该库使用三角形核函数,优化为 O(N + K) 时间复杂度。

在数据处理后,数据会增加两个字段(默认为 y 和 size),均为数组类型,用于表示密度分布的点和对应的密度值。

使用场景

  1. 密度图(Density Plot):展示数据分布的连续估计,比直方图更平滑地展示数据分布。

  2. 小提琴图(Violin Plot):结合箱线图和密度图的特点,既可以展示数据的分布形状,又能显示关键统计信息。

  3. 多组数据分布比较:通过 groupBy 参数,可以同时展示和比较多个分组的数据分布情况。

  4. 平滑的数据可视化:当需要对离散数据点进行平滑处理,展示其整体趋势和分布时。

  5. 不同坐标系下的密度分析:可以在直角坐标系或极坐标系中应用,创建不同视角的数据分布可视化。

配置项

属性描述类型默认值必选
field进行核密度算法的数据字段string-是
groupBy对数据进行分组的分组字段,可以指定多个string[]-是
as进行 KDE 处理之后,存储的字段[string, string]['y', 'size']否
min指定处理范围的最小值number数据最小值否
max指定处理范围的最大值number数据最大值否
size算法最终生成数据的条数,值越大密度曲线越精细number10否
width确定一个元素左右影响多少点,类似于 bandWidth,值越大曲线越平滑number2否

复杂类型说明

  • as:指定 KDE 处理后生成的两个字段名,第一个字段存储 x 值(即数据点的位置),第二个字段存储 y 值(即对应的密度值)。这两个字段都是数组类型,长度由 size 参数决定。

参数调整效果

  • size:该参数决定了生成的密度曲线的精细程度。值越大,生成的点越多,密度曲线越精细。在示例中可以看到从默认的 10 增加到 20 或 30 的效果。

  • width:该参数控制密度曲线的平滑程度,类似于核密度估计中的带宽参数。值越大,曲线越平滑,但可能会丢失一些细节。

示例

基础密度图

下面的示例展示了如何创建基本的密度图,展示不同物种的数据分布:

{
"tooltip": false
}

在这个示例中,我们将 size 参数设置为 20,比默认值 10 更大,从而获得更精细的密度曲线。

极坐标系中的小提琴图

在极坐标系中使用 KDE 可以创建环形的小提琴图,为数据分布可视化提供新的视角:

{
"autoFit": true,
"coordinate": {
"type": "polar"
},
"children": [
{
"type": "density",
"data": {
"transform": [
{
"type": "kde",
"field": "y",
"groupBy": [
"x",
"species"
]
}
]
},
"encode": {
"x": "x",
"y": "y",
"series": "species",
"color": "species",
"size": "size"
},
"tooltip": false
},
{
"type": "boxplot",
"encode": {
"x": "x",
"y": "y",
"series": "species",
"color": "species",
"shape": "violin"
},
"style": {
"opacity": 0.5,
"strokeOpacity": 0.5,
"point": false
}
}
]
}

这个示例展示了如何将 KDE 与箱线图结合使用,创建小提琴图。在极坐标系中,小提琴图呈环形分布,提供了不同的视角来观察数据分布。

自定义参数的密度图

通过调整 KDE 的参数,可以控制密度估计的平滑程度和精度:

{
"tooltip": false
}

这个示例展示了如何自定义 KDE 的各种参数:

  1. size: 30 - 增加采样点数量,获得更精细的密度曲线
  2. width: 3 - 增加带宽,使曲线更平滑
  3. min: 0 和 max: 8 - 指定处理范围的最小值和最大值
  4. as: ['density_x', 'density_y'] - 自定义输出字段名

这些参数的调整可以帮助你获得更精细或更平滑的密度曲线,根据实际需求进行调整。

总结

KDE 数据转换是 Ant Design Charts 中一个强大的工具,可以帮助你创建各种密度相关的可视化,如密度图和小提琴图。通过调整其参数,你可以控制密度曲线的精细度和平滑度,以满足不同的可视化需求。

在不同的坐标系中使用 KDE,可以为数据分布提供不同的视角。结合其他图表类型,如箱线图,可以创建更丰富的数据可视化。

更多的案例,可以查看图表示例 - 小提琴图页面。