面试题目 1: 复刻 Snowflake 雪花图组件

根据给定的 JSON 数据,实现一个交互式五维数据可视化组件

题目要求

📋 功能需求

  • 1雪花图渲染:根据五个维度的分数(VALUE、FUTURE、PAST、HEALTH、DIVIDEND)绘制五边形雪花图,每个维度的分数范围为 0-7,对应这不同的颜色
  • 2动态数据更新:通过 InputNumber 输入框实时调整各维度分数,雪花图需要同步更新
  • 3区域高亮功能:通过 Radio 单选按钮选择某个维度,切换类型为 TOC,此时雪花图中对应的扇形区域需要高亮显示
  • 4Tooltip 提示:当类型为 COMPANY 时,鼠标悬停在雪花图的各个扇形区域时,显示对应维度的详细描述信息
  • 5点击事件:当类型为 COMPANY 时,点击雪花图的任意扇形区域,触发消息提示显示点击的区域索引
  • 6重置功能:点击 Reset 按钮,将所有数据恢复到初始状态
  • 7详细分数显示:每个维度包含 6 个子区域的 boolean 值(section 数组),需要在 Tooltip 中可视化展示

🎨 技术要点

  • 使用 React Hooks(useState、useMemo、useEffect)管理状态
  • 数据解析与顺序处理:将 JSON 数据按指定顺序(value → future → past → health → dividend)映射到雪花图
  • 组件需要有一个 type props,用于切换雪花图的类型,类型为 COMPANY 时,需要有每一块的 TootTip,点击事件等,类型为 TOC 时,雪花图的指定扇形区域需要高亮显示

⚡ 加分项

  • 流畅的动画过渡效果
  • 优雅的交互体验和视觉设计
  • 代码结构清晰,组件拆分合理
  • 性能优化(避免不必要的重渲染)

输入数据(JSON 格式)

1{
2 "companies_score": [
3 {
4 "name": "value",
5 "value": 3,
6 "description": "Does the company pay a good, reliable and sustainable dividend?",
7 "section": [
8 true,
9 true,
10 false,
11 false,
12 false,
13 false
14 ]
15 },
16 {
17 "name": "future",
18 "value": 7,
19 "description": "How is the company forecast to perform in the next 1-3 years?",
20 "section": [
21 true,
22 true,
23 true,
24 true,
25 true,
26 true
27 ]
28 },
29 {
30 "name": "past",
31 "value": 5,
32 "description": "Does the company have strong financial health and manageable debt?",
33 "section": [
34 false,
35 true,
36 true,
37 true,
38 false,
39 true
40 ]
41 },
42 {
43 "name": "health",
44 "value": 7,
45 "description": "How has the company performed over the past 5 years?",
46 "section": [
47 true,
48 true,
49 true,
50 true,
51 true,
52 true
53 ]
54 },
55 {
56 "name": "dividend",
57 "value": 1,
58 "description": "Is the company undervalued compared to its peers, industry and forecasted cash flows?",
59 "section": [
60 false,
61 false,
62 false,
63 false,
64 false,
65 false
66 ]
67 }
68 ]
69}
JSON691317 字符
UTF-8

参考实现效果

📊 调整维度分数

VALUE
FUTURE
PAST
HEALTH
DIVIDEND

🎯 选择高亮区域