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

Đã đóng
  • Có gì không ổn?
#4,707 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@dyk1454683243-sudo đang làm issue này rồi.

Từ ngày 15/10/2026.

  • #5 của @dyk1454683243-sudo — đã đóng, không merge
  • #4709 của @dyk1454683243-sudo — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, typescript
Lĩnh vực
data-visualization

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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 状态同步修复未消除本例异常。

Ngôn ngữ chính
TypeScript
Star
1.9k
Fork
223
Merge trung bình
21 giờ 49 phút
Pull request đã merge (30 ngày)
27

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của VisActor/VChart

Tất cả issue của VisActor/VChart

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.