Skip to content

fix(site): 修复图注与实际节点颜色不符(GOTY 显示为蓝色星形) - #9

Merged
Coolgiserz merged 1 commit into
mainfrom
fix/node-color-single-source
Sep 6, 2026
Merged

Coolgiserz merged 1 commit into
mainfrom
fix/node-color-single-source

Conversation

@Coolgiserz

Copy link
Copy Markdown
Owner

现象:右栏图注写「金色星形 = GOTY、蓝色圆点 = 其他作品」,实际却显示成
蓝色星形 + 金色圆点,与图注完全相反。

根因:vis-network 的 GroupsHandler 对未在 options.groups 中定义的 group,会从内置 _defaultGroups 里按顺序发牌:

_defaultGroups[0] = #97C2FC 蓝  → goty(节点数据里首个出现的 group)
_defaultGroups[1] = #FFFF00 黄  → game
_defaultGroups[2] = #FB7E81 红  → studio
...

发牌次序取决于节点数据中 group 首次出现的先后;且 group 颜色的优先级
高于节点自身的 color 属性
,所以行 204 给每个节点设的 n.color 被整个
盖掉。这意味着颜色长期取决于数据顺序,从未真正生效过。

修复:在 graphOptions() 里显式声明 groups,五个 group 各自定义 color。

  • groups 只定义 color,不定义 shape:形状来自节点数据(star/dot/hexagon/ triangle/diamond),在 group 里写 shape 会反过来覆盖节点数据
  • groups 色值直接复用 groupColors,与节点 color 同源,不会出现 「group 与节点各说各话」
  • 节点 color 赋值保留,作为双重保险

已知取舍:顶层类型(n.tier1)原本的 #2f9e54 会退化为与子类型同色
#27ae60,深浅差异丢失。但图注本来就只靠「大 / 小」区分顶层与子类型
(size 16 vs 9、borderWidth 3 vs 2),不违背图注描述。

验证(Node 模拟,输入取自真实构建产物 site/assets/index.css):

  • 五个 group 色 == 对应 CSS 变量值
  • group 色 == 节点自身 color(两者无冲突)
  • group 内不含 shape
  • 节点 color 赋值代码仍在

现象:右栏图注写「金色星形 = GOTY、蓝色圆点 = 其他作品」,实际却显示成
蓝色星形 + 金色圆点,与图注完全相反。

根因:vis-network 的 GroupsHandler 对**未在 options.groups 中定义**的
group,会从内置 _defaultGroups 里按顺序发牌:

    _defaultGroups[0] = #97C2FC 蓝  → goty(节点数据里首个出现的 group)
    _defaultGroups[1] = #FFFF00 黄  → game
    _defaultGroups[2] = #FB7E81 红  → studio
    ...

发牌次序取决于节点数据中 group 首次出现的先后;且 **group 颜色的优先级
高于节点自身的 color 属性**,所以行 204 给每个节点设的 n.color 被整个
盖掉。这意味着颜色长期取决于数据顺序,从未真正生效过。

修复:在 graphOptions() 里显式声明 groups,五个 group 各自定义 color。

- groups 只定义 color,不定义 shape:形状来自节点数据(star/dot/hexagon/
  triangle/diamond),在 group 里写 shape 会反过来覆盖节点数据
- groups 色值直接复用 groupColors,与节点 color 同源,不会出现
  「group 与节点各说各话」
- 节点 color 赋值保留,作为双重保险

已知取舍:顶层类型(n.tier1)原本的 #2f9e54 会退化为与子类型同色
#27ae60,深浅差异丢失。但图注本来就只靠「大 / 小」区分顶层与子类型
(size 16 vs 9、borderWidth 3 vs 2),不违背图注描述。

验证(Node 模拟,输入取自真实构建产物 site/assets/index.css):
- 五个 group 色 == 对应 CSS 变量值
- group 色 == 节点自身 color(两者无冲突)
- group 内不含 shape
- 节点 color 赋值代码仍在
@Coolgiserz
Coolgiserz merged commit d961cc1 into main Sep 6, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant