AmCharts桑基图：悬停链接时如何高亮全部后续路径

这个需求完全可行，AmCharts虽然没有直接对应的配置项，但可以通过自定义事件监听和数据遍历逻辑来实现全链路高亮效果，具体实现步骤如下：

• 绑定链接悬停/移出事件：给桑基图的链接元素添加pointerover和pointerout事件，触发时执行自定义高亮/重置逻辑
• 递归遍历全链路节点与链接：
  1. 当悬停某条链接（比如C-F）时，先获取该链接的目标节点F
  2. 遍历所有以F为源节点的输出链接（F-I、F-M），将这些链接及对应节点标记为高亮状态
  3. 再分别获取这些链接的目标节点I、M，递归遍历它们的所有输出链接（I-Q、I-R、I-S、I-T、M-U），同样标记高亮
• 控制元素视觉状态：通过修改链接和节点的opacity属性，将未高亮的元素设为低透明度（比如0.2），高亮元素保持默认透明度（1）
• 处理移出重置：鼠标移出链接时，将所有元素的透明度恢复为默认值

核心代码示例：

// 初始化桑基图后绑定事件
chart.seriesContainer.events.on("pointerover", function(ev) {
  if (ev.target instanceof am4charts.SankeyLink) {
    // 先重置所有元素透明度
    chart.links.each(link => {
      link.opacity = 0.2;
    });
    chart.nodes.each(node => {
      node.opacity = 0.2;
    });

    // 高亮当前悬停的链接及两端节点
    ev.target.opacity = 1;
    ev.target.fromNode.opacity = 1;
    ev.target.toNode.opacity = 1;

    // 递归高亮所有后续链路
    highlightLinks(ev.target.toNode);
  }
});

chart.seriesContainer.events.on("pointerout", function() {
  // 重置所有元素的透明度
  chart.links.each(link => {
    link.opacity = 1;
  });
  chart.nodes.each(node => {
    node.opacity = 1;
  });
});

// 递归函数：高亮节点的所有输出链路及后续节点
function highlightLinks(node) {
  node.outgoingLinks.each(link => {
    link.opacity = 1;
    link.toNode.opacity = 1;
    // 继续递归处理下一级节点
    highlightLinks(link.toNode);
  });
}

如果数据量较大，建议给递归逻辑添加终止条件或做性能优化，避免出现卡顿。另外也可以根据需求调整高亮样式（比如修改链接颜色），替代透明度变化。

内容的提问来源于stack exchange，提问作者Maike