D3.js：如何获取与悬停节点关联的连线及箭头

嘿，我来帮你解决悬停节点时修改箭头颜色的问题！你已经能选中连线了，差的就是找到箭头的正确姿势——这得看你的箭头是怎么实现的，常见的两种情况我都给你捋清楚：

情况1：箭头用SVG的<marker>实现（最常见） #

很多图表库或者自定义SVG都会用<marker>来做箭头，它是通过marker-end/marker-start属性绑定到连线上的。这种情况下，你需要从连线的属性里找到对应的marker元素，再修改它的颜色：

假设你的SVG结构大概是这样：

<svg>
  <defs>
    <!-- 箭头的marker定义 -->
    <marker id="arrow-default" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
      <polygon points="0 0, 12 6, 0 12" fill="#333" stroke="#333"/>
    </marker>
  </defs>
  <!-- 和节点关联的连线 -->
  <path class="connection-line" data-linked-node="node1" d="M50,50 L200,200" stroke="#333" marker-end="url(#arrow-default)"/>
</svg>

那你可以在节点的hover事件里这么处理：

// 给节点绑定鼠标悬停事件
document.querySelector('#node1').addEventListener('mouseover', function() {
  // 找到和该节点关联的连线（这里用data属性匹配，你可以换成自己的关联逻辑）
  const connectionLine = document.querySelector(`.connection-line[data-linked-node="${this.id}"]`);
  if (!connectionLine) return;

  // 先改连线颜色
  connectionLine.style.stroke = '#ff4444';

  // 提取marker的ID，找到对应的marker元素
  const markerUrl = connectionLine.getAttribute('marker-end');
  const markerId = markerUrl.replace('url(#', '').replace(')', '');
  const arrowMarker = document.getElementById(markerId);
  
  if (arrowMarker) {
    // 修改marker里的箭头图形颜色（这里是polygon，也可能是path，看你定义）
    const arrowShape = arrowMarker.querySelector('polygon');
    arrowShape.style.fill = '#ff4444';
    arrowShape.style.stroke = '#ff4444';
  }
});

// 鼠标移出时恢复原颜色
document.querySelector('#node1').addEventListener('mouseout', function() {
  const connectionLine = document.querySelector(`.connection-line[data-linked-node="${this.id}"]`);
  if (!connectionLine) return;

  connectionLine.style.stroke = '#333';
  
  const markerUrl = connectionLine.getAttribute('marker-end');
  const markerId = markerUrl.replace('url(#', '').replace(')', '');
  const arrowMarker = document.getElementById(markerId);
  
  if (arrowMarker) {
    const arrowShape = arrowMarker.querySelector('polygon');
    arrowShape.style.fill = '#333';
    arrowShape.style.stroke = '#333';
  }
});

情况2：箭头是独立的DOM元素 #

如果你的箭头是单独的<polygon>/<path>/甚至是<div>，和连线放在同一个父容器里，那直接通过父容器或者关联数据找到箭头元素就行：

比如你的DOM结构是这样：

<g class="connection-group" data-linked-node="node1">
  <path class="connection-line" d="M50,50 L200,200" stroke="#333"/>
  <polygon class="arrow-head" points="200,200 190,194 190,206" fill="#333"/>
</g>

处理逻辑就更简单了：

document.querySelector('#node1').addEventListener('mouseover', function() {
  const connectionGroup = document.querySelector(`.connection-group[data-linked-node="${this.id}"]`);
  if (!connectionGroup) return;

  // 同时修改连线和箭头颜色
  connectionGroup.querySelector('.connection-line').style.stroke = '#ff4444';
  connectionGroup.querySelector('.arrow-head').style.fill = '#ff4444';
});

document.querySelector('#node1').addEventListener('mouseout', function() {
  const connectionGroup = document.querySelector(`.connection-group[data-linked-node="${this.id}"]`);
  if (!connectionGroup) return;

  connectionGroup.querySelector('.connection-line').style.stroke = '#333';
  connectionGroup.querySelector('.arrow-head').style.fill = '#333';
});

小提示 #

如果你用的是D3、Vis.js这类可视化库，它们通常有内置的方法来获取连线关联的箭头元素，比如D3里可以通过link对象对应的marker属性直接获取，不用自己去DOM里找。你可以看看对应库的文档，可能会更省心！

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