数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载旭日图Sunburst是 F2 移动端图表库中用于展示层级数据的径向图表组件它通过同心圆环的嵌套关系直观呈现数据的层级结构每一层圆环代表一个层级扇区的大小角度或弧长反映数据数值。本文将围绕 F2 官方案例文档 site/examples/relation/sunburst/index.zh.md 中的核心配置与代码演示结合组件源码packages/f2/src/components/sunburst/与测试用例packages/f2/test/components/sunburst/index.test.tsx完整讲解基础用法、Props 参数、底层布局算法与典型使用场景帮助你快速在移动端项目中落地旭日图。什么是旭日图旭日图是一种径向排布的层级数据图表由中心向外层层扩展的同心圆环组成每一层圆环对应数据树中的一个层级从根节点到各级子节点同一层内扇区的角度大小与节点数值成正比角度越大代表该数据项的数值越大不同层级之间通过不同半径的圆环区分层与层之间用分隔线默认白色细线隔开使层级归属一目了然。它兼具结构展示与数值比较两种能力尤其适合在有限屏幕空间如移动端内呈现深层次、多分支的树形数据。基础示例与代码演示F2 官方示例文档提供了完整可运行的 基础旭日图 demo。其核心 JSX 代码如下import { jsx, Canvas, Sunburst } from antv/f2; const { props } ( Canvas context{context} Sunburst data{data.children} coord{{ type: polar, }} color{{ field: name, }} valuevalue space{4} / /Canvas ); const chart new Canvas(props); chart.render();在完整 demo 中数据通过fetch异步获取sunburst.jsx渲染前先创建 Canvas 上下文并通过new Canvas(props)与chart.render()完成挂载。注意data传入的是data.children——即从树的根的子节点开始根节点本身不参与绘制。配置要点速览配置项示例值作用datadata.children层级数据数组每项可含children子树coord{ type: polar }极坐标系旭日图的径向形态由此产生color{ field: name }按name字段为每个分类分配颜色valuevalue指定决定扇区大小的数值字段space4扇区之间的间距单位像素组件 Props 详解根据 SunburstProps 接口定义Sunburst组件支持以下属性属性类型默认值说明dataData-层级结构数据数组必填子级通过children字段嵌套coordCoordProps-坐标系配置旭日图使用{ type: polar }极坐标colorArray \| ColorAttrObject-颜色映射配置可为颜色数组或对象valuestring-指定节点数值字段名用于计算扇区大小sortboolean \| Functiontrue是否按数值排序或传入自定义排序函数onClick(ev) void-扇区点击事件回调其中ColorAttrObject的结构为interface ColorAttrObject { field: string; // 用于颜色映射的字段名 range?: any[]; // 颜色范围数组不传时使用主题默认色板 callback?: (value) any; // 自定义颜色映射函数 }坐标系配置 coord旭日图形态完全依赖坐标系coord传{ type: polar }时渲染为径向圆环传其他类型如默认的直角坐标系时则渲染为矩形的冰柱图Icicle形态。这个分支逻辑在 view.tsx 中体现if (coord.type polar) { return SunburstView {...props} /; } return IcicleView {...props} /;也就是说同一个Sunburst组件配合不同坐标系即可输出两种不同的层级可视化极坐标下的旭日图与直角坐标下的冰柱图二者共享同一套数据布局逻辑。颜色映射 colorcolor的field指定分类字段后组件内部会创建一个Category分类颜色属性withSunburst.tsxthis.color new Category({ range: Theme.colors, // 默认使用主题色板 ...color, data, });在_mapping阶段每个节点通过rootParent回溯到最顶层父节点深度为 1 的层级再根据该父节点在color.field字段上的值映射颜色withSunburst.tsx。这意味着一级分类之下的所有子孙扇区共享同一种颜色整个子树用同一色相呈现视觉上更易区分大类归属。数据格式与准备旭日图要求嵌套的树形结构数据。每个节点对象至少包含{ name: analytics, // 分类字段用于颜色映射 children: [ // 子节点数组叶子节点可省略 { name: cluster, children: [...] }, { name: graph, value: 5731 }, ], // 叶子节点需要 value 数值字段 }value字段本例为value用于计算扇区大小。测试用例 data.ts 中使用的是一棵经典的多级分类树如analytics→cluster→AgglomerativeCluster: 3938叶子节点均带数值中间节点则通过子节点数值累加得到权重。数值不一定是叶子专属中间节点也可以显式携带value布局算法求和时会叠加计算。整体遵循父节点权重 自身权重 子节点权重之和的规则。源码级原理层级布局与渲染布局算法hierarchy partitionSunburst的布局核心位于 withSunburst.tsx 的sunburst()方法它复用了仓库内置的 d3-hierarchy 实现链路如下构建层级树hierarchy({ children: data }).sum(...)将扁平嵌套数组转为层级对象sum按value字段自底向上累加每个节点的权重排序默认按value从大到小排序也支持传入自定义排序函数sort为函数时使用函数sort false时跳过排序切分布局partition()将层级树切分为各层圆环为每个节点计算x0/x1角度区间与y0/y1半径区间坐标映射_mapping通过coord.getCoord().convertRect({ x: [x0, x1], y: [y0, y1] })将布局区间转换为极坐标系下的真实像素几何withSunburst.tsx得到每个节点的xMin/xMax/yMin/yMax与color。渲染层递归绘制扇区SundburstView太阳图视图 是极坐标形态的渲染器以坐标系中心coord.center为圆心对每个节点递归绘制sector扇区startAngle/endAngle取自角度区间xMin/xMax内外半径r0/r取自半径区间yMin/yMax填充色为映射后的color并以 1px 白色描边区分相邻扇区sector attrs{{ cx: x, cy: y, lineWidth: 1px, stroke: #fff, startAngle: ${xMin} rad, endAngle: ${xMax} rad, r0: yMin, r: yMax, fill: color, }} /节点若存在子节点则递归进入下一层绘制sunburstView.tsx由此形成由内向外逐层展开的圆环结构。冰柱图渲染当坐标系不是 polar 时IcicleView 负责渲染每个节点绘制一个rect矩形width与height由xMin/xMax、yMin/yMax计算颜色映射逻辑完全一致。这种形态适合在直角坐标空间中展示层级占比例如作为旭日图的扁平化替代方案。测试验证测试用例 index.test.tsx 以{ type: polar }坐标 field: name颜色映射渲染样例数据并通过toMatchImageSnapshot()做图像快照对比。测试数据的渲染结果渲染快照清晰展示了多层圆环、按大类共享颜色的效果各一级分类扇区以不同色系铺满对应角度范围外层细分扇区按子节点数量密度自然分布。使用场景官方文档将旭日图的适用场景归纳为四类均符合层级 数值占比的数据特征文件系统目录结构展示目录、子目录与文件大小外环细扇区对应文件内环粗扇区对应目录组织架构的可视化部门 → 团队 → 成员扇区面积可映射团队规模或预算分类数据的层级展示商品大类 → 子类 → SKU观察各分类对总体的贡献预算分配和资源分布分析总预算逐级下钻到具体项目直观对比各分支的资源占比。与同目录下的 矩形树图Treemap文档 对比Treemap 用矩形面积表达数值、适合空间利用率优先的扁平层级旭日图用圆环角度表达数值、适合强调层级嵌套关系与整体占比的场景。两者共用嵌套数据模型可根据业务形态选择。进阶配置与注意事项排序策略sort默认开启且按value降序让大数值扇区优先占据起始角度若希望保留数据原有顺序可设置sort{false}若需自定义规则如按字母序传入函数(a, b) ...即可withSunburst.tsx。扇区间距space{4}控制扇区间的留白数值越大扇区边界越清晰但过大会压缩有效绘图区域测试默认配置中该值可省略。颜色层级颜色基于一级分类深度为 1 的根节点映射同一子树共享颜色——如果希望叶子节点也独立配色可自定义color.callback实现细粒度映射。事件交互onClick回调会随每个扇区的group onClick绑定sunburstView.tsx可用于点击下钻或详情展示等移动端交互。数据校验务必保证value字段存在于数据中且叶子节点携带数值color.field指定的字段需在顶层分类中存在否则颜色无法正确分组。总结F2 的Sunburst组件以嵌套数据 极坐标 hierarchy/partition 布局三件套在移动端画布上高效渲染层级数据的径向视图。通过 官方示例 的coord、color、value、space四个核心配置即可快速上手深入源码可看到它与冰柱图共享同一套布局管线仅因坐标系不同而切换渲染视图。对于文件目录、组织架构、分类占比等层级 数值型数据旭日图是兼顾美观与信息密度的首选方案。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐InceptionNeXt模型inception_next_base.sail_in1k_384与其他视觉模型对比分析如何选择最佳图像分类模型 InceptionNeXt模型inception_next_base.sail_in1k_384与其他视觉模型对比分析如何选择最佳图像分类模型 在计算机数据可视化前端Vega 旭日图Sunburst实现指南基于 partition 变换的径向空间填充层级可视化Vega 旭日图Sunburst实现指南基于 partition 变换的径向空间填充层级可视化 Sunburst旭日图是一种径向的空间填充树形可视化数据可视化react-vis 旭日图Sunburst完全指南从数据层次到源码级实现原理react vis 旭日图Sunburst完全指南从数据层次到源码级实现原理 本文基于 react vis 仓库中 docs/sunburst.md ht数据可视化图表库前端上一篇INT8 ConvRot量化技术详解Qwen3-VL-32B模型高效部署的秘密下一篇10分钟掌握NodeSource安装脚本生成器从原理到实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
F2 旭日图（Sunburst）组件实战指南：层级数据径向可视化的配置、原理与场景
数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载旭日图Sunburst是 F2 移动端图表库中用于展示层级数据的径向图表组件它通过同心圆环的嵌套关系直观呈现数据的层级结构每一层圆环代表一个层级扇区的大小角度或弧长反映数据数值。本文将围绕 F2 官方案例文档 site/examples/relation/sunburst/index.zh.md 中的核心配置与代码演示结合组件源码packages/f2/src/components/sunburst/与测试用例packages/f2/test/components/sunburst/index.test.tsx完整讲解基础用法、Props 参数、底层布局算法与典型使用场景帮助你快速在移动端项目中落地旭日图。什么是旭日图旭日图是一种径向排布的层级数据图表由中心向外层层扩展的同心圆环组成每一层圆环对应数据树中的一个层级从根节点到各级子节点同一层内扇区的角度大小与节点数值成正比角度越大代表该数据项的数值越大不同层级之间通过不同半径的圆环区分层与层之间用分隔线默认白色细线隔开使层级归属一目了然。它兼具结构展示与数值比较两种能力尤其适合在有限屏幕空间如移动端内呈现深层次、多分支的树形数据。基础示例与代码演示F2 官方示例文档提供了完整可运行的 基础旭日图 demo。其核心 JSX 代码如下import { jsx, Canvas, Sunburst } from antv/f2; const { props } ( Canvas context{context} Sunburst data{data.children} coord{{ type: polar, }} color{{ field: name, }} valuevalue space{4} / /Canvas ); const chart new Canvas(props); chart.render();在完整 demo 中数据通过fetch异步获取sunburst.jsx渲染前先创建 Canvas 上下文并通过new Canvas(props)与chart.render()完成挂载。注意data传入的是data.children——即从树的根的子节点开始根节点本身不参与绘制。配置要点速览配置项示例值作用datadata.children层级数据数组每项可含children子树coord{ type: polar }极坐标系旭日图的径向形态由此产生color{ field: name }按name字段为每个分类分配颜色valuevalue指定决定扇区大小的数值字段space4扇区之间的间距单位像素组件 Props 详解根据 SunburstProps 接口定义Sunburst组件支持以下属性属性类型默认值说明dataData-层级结构数据数组必填子级通过children字段嵌套coordCoordProps-坐标系配置旭日图使用{ type: polar }极坐标colorArray \| ColorAttrObject-颜色映射配置可为颜色数组或对象valuestring-指定节点数值字段名用于计算扇区大小sortboolean \| Functiontrue是否按数值排序或传入自定义排序函数onClick(ev) void-扇区点击事件回调其中ColorAttrObject的结构为interface ColorAttrObject { field: string; // 用于颜色映射的字段名 range?: any[]; // 颜色范围数组不传时使用主题默认色板 callback?: (value) any; // 自定义颜色映射函数 }坐标系配置 coord旭日图形态完全依赖坐标系coord传{ type: polar }时渲染为径向圆环传其他类型如默认的直角坐标系时则渲染为矩形的冰柱图Icicle形态。这个分支逻辑在 view.tsx 中体现if (coord.type polar) { return SunburstView {...props} /; } return IcicleView {...props} /;也就是说同一个Sunburst组件配合不同坐标系即可输出两种不同的层级可视化极坐标下的旭日图与直角坐标下的冰柱图二者共享同一套数据布局逻辑。颜色映射 colorcolor的field指定分类字段后组件内部会创建一个Category分类颜色属性withSunburst.tsxthis.color new Category({ range: Theme.colors, // 默认使用主题色板 ...color, data, });在_mapping阶段每个节点通过rootParent回溯到最顶层父节点深度为 1 的层级再根据该父节点在color.field字段上的值映射颜色withSunburst.tsx。这意味着一级分类之下的所有子孙扇区共享同一种颜色整个子树用同一色相呈现视觉上更易区分大类归属。数据格式与准备旭日图要求嵌套的树形结构数据。每个节点对象至少包含{ name: analytics, // 分类字段用于颜色映射 children: [ // 子节点数组叶子节点可省略 { name: cluster, children: [...] }, { name: graph, value: 5731 }, ], // 叶子节点需要 value 数值字段 }value字段本例为value用于计算扇区大小。测试用例 data.ts 中使用的是一棵经典的多级分类树如analytics→cluster→AgglomerativeCluster: 3938叶子节点均带数值中间节点则通过子节点数值累加得到权重。数值不一定是叶子专属中间节点也可以显式携带value布局算法求和时会叠加计算。整体遵循父节点权重 自身权重 子节点权重之和的规则。源码级原理层级布局与渲染布局算法hierarchy partitionSunburst的布局核心位于 withSunburst.tsx 的sunburst()方法它复用了仓库内置的 d3-hierarchy 实现链路如下构建层级树hierarchy({ children: data }).sum(...)将扁平嵌套数组转为层级对象sum按value字段自底向上累加每个节点的权重排序默认按value从大到小排序也支持传入自定义排序函数sort为函数时使用函数sort false时跳过排序切分布局partition()将层级树切分为各层圆环为每个节点计算x0/x1角度区间与y0/y1半径区间坐标映射_mapping通过coord.getCoord().convertRect({ x: [x0, x1], y: [y0, y1] })将布局区间转换为极坐标系下的真实像素几何withSunburst.tsx得到每个节点的xMin/xMax/yMin/yMax与color。渲染层递归绘制扇区SundburstView太阳图视图 是极坐标形态的渲染器以坐标系中心coord.center为圆心对每个节点递归绘制sector扇区startAngle/endAngle取自角度区间xMin/xMax内外半径r0/r取自半径区间yMin/yMax填充色为映射后的color并以 1px 白色描边区分相邻扇区sector attrs{{ cx: x, cy: y, lineWidth: 1px, stroke: #fff, startAngle: ${xMin} rad, endAngle: ${xMax} rad, r0: yMin, r: yMax, fill: color, }} /节点若存在子节点则递归进入下一层绘制sunburstView.tsx由此形成由内向外逐层展开的圆环结构。冰柱图渲染当坐标系不是 polar 时IcicleView 负责渲染每个节点绘制一个rect矩形width与height由xMin/xMax、yMin/yMax计算颜色映射逻辑完全一致。这种形态适合在直角坐标空间中展示层级占比例如作为旭日图的扁平化替代方案。测试验证测试用例 index.test.tsx 以{ type: polar }坐标 field: name颜色映射渲染样例数据并通过toMatchImageSnapshot()做图像快照对比。测试数据的渲染结果渲染快照清晰展示了多层圆环、按大类共享颜色的效果各一级分类扇区以不同色系铺满对应角度范围外层细分扇区按子节点数量密度自然分布。使用场景官方文档将旭日图的适用场景归纳为四类均符合层级 数值占比的数据特征文件系统目录结构展示目录、子目录与文件大小外环细扇区对应文件内环粗扇区对应目录组织架构的可视化部门 → 团队 → 成员扇区面积可映射团队规模或预算分类数据的层级展示商品大类 → 子类 → SKU观察各分类对总体的贡献预算分配和资源分布分析总预算逐级下钻到具体项目直观对比各分支的资源占比。与同目录下的 矩形树图Treemap文档 对比Treemap 用矩形面积表达数值、适合空间利用率优先的扁平层级旭日图用圆环角度表达数值、适合强调层级嵌套关系与整体占比的场景。两者共用嵌套数据模型可根据业务形态选择。进阶配置与注意事项排序策略sort默认开启且按value降序让大数值扇区优先占据起始角度若希望保留数据原有顺序可设置sort{false}若需自定义规则如按字母序传入函数(a, b) ...即可withSunburst.tsx。扇区间距space{4}控制扇区间的留白数值越大扇区边界越清晰但过大会压缩有效绘图区域测试默认配置中该值可省略。颜色层级颜色基于一级分类深度为 1 的根节点映射同一子树共享颜色——如果希望叶子节点也独立配色可自定义color.callback实现细粒度映射。事件交互onClick回调会随每个扇区的group onClick绑定sunburstView.tsx可用于点击下钻或详情展示等移动端交互。数据校验务必保证value字段存在于数据中且叶子节点携带数值color.field指定的字段需在顶层分类中存在否则颜色无法正确分组。总结F2 的Sunburst组件以嵌套数据 极坐标 hierarchy/partition 布局三件套在移动端画布上高效渲染层级数据的径向视图。通过 官方示例 的coord、color、value、space四个核心配置即可快速上手深入源码可看到它与冰柱图共享同一套布局管线仅因坐标系不同而切换渲染视图。对于文件目录、组织架构、分类占比等层级 数值型数据旭日图是兼顾美观与信息密度的首选方案。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐InceptionNeXt模型inception_next_base.sail_in1k_384与其他视觉模型对比分析如何选择最佳图像分类模型 InceptionNeXt模型inception_next_base.sail_in1k_384与其他视觉模型对比分析如何选择最佳图像分类模型 在计算机数据可视化前端Vega 旭日图Sunburst实现指南基于 partition 变换的径向空间填充层级可视化Vega 旭日图Sunburst实现指南基于 partition 变换的径向空间填充层级可视化 Sunburst旭日图是一种径向的空间填充树形可视化数据可视化react-vis 旭日图Sunburst完全指南从数据层次到源码级实现原理react vis 旭日图Sunburst完全指南从数据层次到源码级实现原理 本文基于 react vis 仓库中 docs/sunburst.md ht数据可视化图表库前端上一篇INT8 ConvRot量化技术详解Qwen3-VL-32B模型高效部署的秘密下一篇10分钟掌握NodeSource安装脚本生成器从原理到实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
