如何在D3和弦图中实现悬停时显示对应矩阵数据的文本信息

看起来你现在的问题是在悬停和弦时错误替换了整个图表内容，而不是添加一个独立的提示框来展示信息。别担心，我们可以通过以下步骤来实现你想要的悬停显示Chord Info功能：

1. 先准备一个提示框元素 #

首先在页面里添加一个用于显示提示信息的div，一开始设为隐藏状态，用CSS控制它的样式：

<div id="chord-tooltip" style="position: absolute; opacity: 0; background: #f9f9f9; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; pointer-events: none; z-index: 1000;"></div>

这里设置pointer-events: none是为了让提示框不会干扰鼠标对和弦路径的事件监听。

2. 在D3代码中绑定悬停事件 #

接下来，在你绘制和弦路径的代码部分，给每个和弦路径添加mouseover和mouseout事件，通过和弦对象的索引去矩阵里获取实际数据：

首先先获取提示框元素：

const tooltip = d3.select("#chord-tooltip");

然后在绘制和弦的代码里添加事件监听：

// 假设你已经有了chords数据和绘制和弦的基础代码
svg.selectAll(".chord")
  .data(chords)
  .enter()
  .append("path")
  .attr("class", "chord")
  .style("fill", d => color(d.source.index))
  .style("opacity", 0.6)
  .attr("d", d3.chord().radius(innerRadius))
  // 鼠标悬停时触发
  .on("mouseover", function(event, d) {
    // 从和弦对象里拿到源和目标节点的索引
    const sourceIdx = d.source.index;
    const targetIdx = d.target.index;
    // 从你的matrix里取出对应的数值
    const connectionValue = matrix[sourceIdx][targetIdx];

    // 构建提示文本，你可以根据需求自定义内容
    const tooltipContent = `
      <strong>Chord Info</strong><br>
      源节点: ${sourceIdx}<br>
      目标节点: ${targetIdx}<br>
      关联数值: ${connectionValue}
    `;

    // 显示提示框，设置位置和内容
    tooltip.html(tooltipContent)
      .style("opacity", 1)
      .style("left", `${event.pageX + 15}px`)
      .style("top", `${event.pageY - 20}px`);

    // 可选：高亮当前悬停的和弦
    d3.select(this).style("opacity", 1);
  })
  // 鼠标离开时触发
  .on("mouseout", function() {
    // 隐藏提示框
    tooltip.style("opacity", 0);
    // 恢复和弦的透明度
    d3.select(this).style("opacity", 0.6);
  });

3. 关键注意点 #

• 不要在悬停事件里操作整个SVG元素，而是使用独立的提示框来承载信息，这样就不会出现图表消失的问题了。
• D3的和弦对象（d参数）里的source.index和target.index对应你矩阵的行和列索引，直接用这两个索引去matrix里取值就能拿到实际的关联数据。
• 如果你的节点有自定义名称（比如一个nodes数组），可以把sourceIdx换成nodes[sourceIdx]，让提示信息更直观。

这样修改后，当你悬停在某个和弦上时，就会在鼠标旁边弹出一个显示详细信息的提示框，而不会影响整个图表的显示啦。

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