Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Cerrado
  • ¿Algo no está bien?
#4,707 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@dyk1454683243-sudo ya está trabajando en esto.

Desde el 15/10/2026.

  • #5 de @dyk1454683243-sudo — cerrado sin fusionar
  • #4709 de @dyk1454683243-sudo — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
javascript, typescript
Área
data-visualization

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
1.8k
Forks
219
Merge medio
1 d 20 h
PR fusionados (30 d)
19

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de VisActor/VChart

Todos los issues de VisActor/VChart

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.