feat(sequence-scatter-background): add categorical background drawing… #3759
+222
−66
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
skie1997
reviewed
Mar 19, 2025
| const xExtent = { min: xMin - xExpand, max: xMax + xExpand }; | ||
| const yExtent = { min: yMin - yExpand, max: yMax + yExpand }; | ||
|
|
||
| const xStep = (xExtent.max - xExtent.min) / bins; |
There was a problem hiding this comment.
step决定了背景的填充色块的大小，这个大小其实是不变的。
现在的逻辑相当于保持每个group下填充色块的数量不变，而非色宽的大小不变。
写成定值（比如0.1），右下角group的填充色块就不会堆积在一起了。
修改后：
修改前：
| symbolType: 'rect', | ||
| x: (datum: any, ctx: any) => { | ||
| // 获取region位置 | ||
| // const regionStartPoint = ctx.chart.getAllRegions()[0].getLayoutStartPoint(); |
| { | ||
| id: 'colorScale', | ||
| type: 'ordinal', | ||
| specified: { |
|
|
||
| const kdeResult: Array<{ x: number; y: number; kde: number; label: string }> = []; | ||
|
|
||
| const expandRatio = 0.2; // 扩展比例 |
There was a problem hiding this comment.
写成常量，const EXPAND_RATIO = 0.2，提出来放到同级目录下的constant.ts中
| } | ||
| ] | ||
| }); | ||
| }); | ||
| return result; | ||
| } | ||
|
|
||
| // KDE 相关的工具函数 | ||
| function gaussKernel(x: number) { |
There was a problem hiding this comment.
工具函数可以放到同级目录下的utils.ts文件中
| xField: spec.xField, | ||
| yField: spec.yField | ||
| dataIndex: 0, | ||
| xField: 'x', |
There was a problem hiding this comment.
从配置中读取spec.xField, spec.yField, spec.seriesField
| } | ||
| density = density / (points.length * h * h); | ||
| densities.push(density); // 先暂存 density 值 | ||
| kdeResult.push({ x, y, kde: density, label }); // 同时也先存入 kdeResult |
There was a problem hiding this comment.
数据字段保持和spec统一，[spec.xField]: x, [spec.yField]: y....
| } | ||
| } | ||
|
|
||
| // // 归一化每个 label 的 KDE 密度值到 [0, 1] 范围内 |
There was a problem hiding this comment.
maxDensity 和 minDensity 可以在caculateKDE的时候直接对比得到，类似👇，减少性能损耗。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…(in progress)
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
#3574
🔗 Related PR link
🐞 Bugserver case id
💡 Background and solution
初步实现分类背景绘制功能：为了展示机器学习聚类算法的效果，动态显示不同标签的数据点在不同迭代轮次的聚集程度。
创建了 SequenceScatterChartSpecTransformer 类，将特定的序列散点图配置转换为通用的 VChart 配置。
主要包括：
效果展示
图 1 为训练集 1 的效果，图 2 为训练集 2 的效果
未来改进方向
KDE 参数调优： 未来将增加手动调节 bandwidth 的选项（调节核密度估计的平滑程度，bandwith 越高，估计的结果越平滑。每个数据点的影响范围更大，会将更多的邻近点纳入考虑范围），允许用户对 KDE 结果进行更精细的控制。
归一化策略： KDE 密度值的归一化被临时注释，当前的密度值直接映射到透明度。虽然保留了不同 label 间 KDE 值的相对大小关系，但缺乏统一的密度范围，可能导致不同数据集间的密度视觉呈现不一致。需要探索更通用的策略（目前策略是为不同标签的数据统一生成 100*100 = 10000 个图元，因此比较聚集的点的背景显示不出透明度差异，如效果展示中的图 1的紫色分组）。
性能优化： 计划优化 calculateKDE 函数的计算过程，以提高大数据集下的性能。
自定义程度提升： 将提供更多的配置项，允许用户自定义 KDE 密度图的颜色、形状等属性，满足个性化的需求。
📝 Changelog
☑️ Self-Check before Merge
🚀 Summary
copilot:summary
🔍 Walkthrough
copilot:walkthrough