Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Bug] Sankey related hover throws TypeError for nodes and links in 2.1.7

クローズ
  • 何か問題がありますか？
#4,707 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@dyk1454683243-sudo がすでに取り組んでいます。

2026年10月15日 から。

  • #5 @dyk1454683243-sudo による — マージされずにクローズ
  • #4709 @dyk1454683243-sudo による — オープン

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
javascript, typescript
領域
data-visualization

調査の方向性

Start with the repro HTML in the issue, which uses a plain 4-node, 4-link sankey with emphasis.effect: "related", and check the open pull request #4709 before starting. The two throws come from packages/vchart/src/series/sankey/sankey.ts: the node path near lines 660-669 and the link path near lines 877-906. Compare how they read datum metadata with getDatumOfGraphic. Done means hover on nodes and links raises no error, related paths highlight, and the styles restore on mouse-out.

索引モデルが issue の本文から書いたものです。

説明

bug
Version

2.1.7 (also reproduced in 2.1.6 and 2.0.21)

Link to Minimal Reproduction

https://github.com/user-attachments/files/33484647/sankey-related-repro.zip

Steps to Reproduce

最小复现附件：sankey-related-repro.zip

  1. 解压附件，用任意静态 HTTP 服务打开 repro.html，并打开浏览器 Console。
  2. 初始应显示 4 个节点、4 条连线，无运行异常。
  3. 鼠标移到最左侧节点 A，触发 _handleNodeRelatedClick 异常。
  4. 刷新页面，再 hover A → B 连线，触发 _handleLinkRelatedClick 异常。
  5. 将脚本 URL 中的 @2.1.7 分别改为 @2.1.6、@2.0.21，重复步骤 2–4，结果一致。

这是流量守恒的合成 DAG；纯 HTML + 官方 UMD，无框架、iframe、Skill、应用后端或登录依赖。

完整 HTML（与附件一致） 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VChart Sankey related hover reproduction</title>
  <script src="https://unpkg.com/@visactor/[email protected]/build/index.min.js"></script>
</head>
<body>
  <p>Hover node A. Reload, then hover the A → B link. Inspect the console.</p>
  <div id="chart" style="width:900px;height:500px"></div>
  <script>
    const spec = {
      type: 'sankey',
      animation: false,
      data: {
        values: [{
          nodes: [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }],
          links: [
            { source: 'A', target: 'B', value: 6 },
            { source: 'A', target: 'C', value: 4 },
            { source: 'B', target: 'D', value: 6 },
            { source: 'C', target: 'D', value: 4 }
          ]
        }]
      },
      nodeKey: 'name',
      categoryField: 'name',
      sourceField: 'source',
      targetField: 'target',
      valueField: 'value',
      nodeWidth: 20,
      nodeGap: 20,
      label: { visible: true },
      emphasis: { enable: true, trigger: 'hover', effect: 'related' }
    };
    const chart = new VChart.default(spec, { dom: 'chart' });
    chart.renderSync();
  </script>
</body>
</html>
Current Behavior

普通 nodes/links 数据在 emphasis.effect: "related" 下，节点和连线 hover 均会抛出库内异常。初始绘制正常，失败发生在交互阶段。

@visactor/vchart 初始绘制（4 节点 / 4 连线） hover 节点 A hover 连线 A → B
2.0.21 正常，无异常 读取 undefined[0] 抛错 读取 undefined.length 抛错
2.1.6 正常，无异常 同上 同上
2.1.7 正常，无异常 同上 同上

同一独立 HTML 仅更换官方脚本版本，每次核对实际 VChart.version。

节点 hover（2.1.7）：

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at .../[email protected]/build/index.min.js:21:91721
    at _handleNodeRelatedClick (.../index.min.js:21:91398)
    at _handleEmphasisElement (.../index.min.js:21:89162)

连线 hover（2.1.7）：

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at .../[email protected]/build/index.min.js:21:94912
    at _handleLinkRelatedClick (.../index.min.js:21:94877)
    at _handleEmphasisElement (.../index.min.js:21:89221)

关联路径高亮无法完成。宿主应用捕获运行异常并展示错误页时，会表现为整张图退出预览；但裸 HTML 已独立复现，宿主错误页不是异常来源。这里确认的是未捕获的 JavaScript 运行异常，并非浏览器进程崩溃。

Expected Behavior

对于普通 nodes/links 图数据：

  • 节点与连线 hover 均不应抛错。
  • related 应正确高亮关联路径。
  • 鼠标移开后恢复初始样式，后续交互仍正常。
  • 不应要求调用方添加层级数据专用的 parents 字段或修补库的私有方法。
Environment
- OS: macOS 14.7.8
- Browser: Chrome 155.0.8059.41（Playwright 驱动真实鼠标 hover）
- Framework: 无，纯 HTML + JavaScript
- Renderer: 默认 Canvas
- Package: 官方 unpkg.com/@visactor/vchart@<version>/build/index.min.js
Any additional comments?

已核对 v2.1.7 源码，两条异常分别对应：

  1. 节点路径遍历仍读取 nodeElement.data[0] / targetNode.data[0]；此运行版本图元数据位于 graphic.context.data[0]，函数入口及其他路径使用 getDatumOfGraphic。
  2. 连线路径分支以 datum 是否存在选择 parents 分支，普通 graph link 同样有 datum，随后对不存在的 parents 读取 length。

建议修复库内数据读取与普通图/层级图分支判定，并覆盖节点、连线、分叉合流、取消高亮及层级数据比例高亮的回归。以上定位不表示只替换一处属性就能保证整个遍历逻辑正确。

相关报告：#4305、#4584 描述了 related 高亮无效，但未提供本例两条异常的堆栈，是否同源尚未确认。本 issue 单独跟踪已发布版本中的未捕获异常及其最小复现。2.1.7 的 Glyph 状态同步修复未消除本例异常。

主要言語
TypeScript
スター
1.9k
フォーク
222
平均マージ
11時間 28分
マージ済み PR（30日）
17

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

VisActor/VChart のほかの issue

VisActor/VChart の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。