AmCharts弦图：实现元素悬停时批量调整透明度需求

要实现你需要的悬停高亮效果，不能单纯依赖元素的states配置，得通过监听鼠标事件批量控制所有节点和链接的透明度，具体实现如下：

1. 节点悬停时的高亮逻辑 #

给节点模板添加pointerover和pointerout事件，悬停时筛选出关联的节点和链接，其余元素设为半透明：

// 获取节点模板
const nodeTemplate = chart.nodes.template;

// 节点悬停事件
nodeTemplate.events.on("pointerover", function(event) {
  const hoveredNode = event.target;
  
  // 遍历所有节点设置透明度
  chart.nodes.each(function(node) {
    // 保留当前节点，以及所有与当前节点有链接的节点
    let isRelated = node === hoveredNode;
    if (!isRelated) {
      isRelated = chart.links.some(link => 
        (link.source === node && link.target === hoveredNode) || 
        (link.source === hoveredNode && link.target === node)
      );
    }
    node.opacity = isRelated ? 1 : 0.5;
  });
  
  // 遍历所有链接设置透明度
  chart.links.each(function(link) {
    // 保留与当前节点相关的链接
    link.opacity = (link.source === hoveredNode || link.target === hoveredNode) ? 1 : 0.5;
  });
});

// 节点移出事件，恢复所有元素透明度
nodeTemplate.events.on("pointerout", function() {
  chart.nodes.each(node => node.opacity = 1);
  chart.links.each(link => link.opacity = 1);
});

2. 链接悬停时的高亮逻辑 #

给链接模板添加同样的事件，悬停时仅保留当前链接及其源、目标节点：

// 获取链接模板
const linkTemplate = chart.links.template;

// 链接悬停事件
linkTemplate.events.on("pointerover", function(event) {
  const hoveredLink = event.target;
  const sourceNode = hoveredLink.source;
  const targetNode = hoveredLink.target;
  
  // 遍历所有节点，仅保留源和目标节点
  chart.nodes.each(function(node) {
    node.opacity = (node === sourceNode || node === targetNode) ? 1 : 0.5;
  });
  
  // 遍历所有链接，仅保留当前链接
  chart.links.each(function(link) {
    link.opacity = link === hoveredLink ? 1 : 0.5;
  });
});

// 链接移出事件，恢复所有元素透明度
linkTemplate.events.on("pointerout", function() {
  chart.nodes.each(node => node.opacity = 1);
  chart.links.each(link => link.opacity = 1);
});

整合说明 #

把上述代码替换你原来的hoverState配置部分即可：

• 悬停节点时，仅保留该节点及所有与其相连的节点、链接为完全不透明，其余元素半透明
• 悬停链接时，仅保留该链接及其两端的节点为完全不透明，其余元素半透明

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