Force Directed Graph：如何为被点击标签的关联<line>应用对应样式？

我创建了一个力导向图（Force Directed Graph），多个标签附着在<line>元素对应的路径上。点击单个标签时，标签会变为蓝色。现在希望根据点击的标签更改对应<line>的样式：每个标签都有独立数据，我通过数据中的lineStyle属性，在.on点击事件中设置线条样式（示例代码如下）：

d3.select(this).each(function(d){
  if (d.lineStyle === "Confirmed"){
    _d3.select('.link').style('stroke', '#444');
    _d3.select('.link').style('stroke-dasharray', '0');
  } else if (d.lineStyle === "Unconfirmed"){
    _d3.select('.link').style('stroke-dasharray', '8, 5');
  }
});

当lineStyle为"Confirmed"时应用一种样式，为"Unconfirmed"时应用另一种样式。但当前代码存在问题：无论点击哪个标签，样式只会应用到某一条<line>上。

核心需求：找到被点击标签的最近关联<line>（.link类元素），仅为该线条应用对应样式。

我尝试过使用this.parentNode，例如_d3.select(this.parentNode).selectAll('.link').style('stroke-dasharray', '8, 5');，但未成功。请问是否有方法找到与标签关联的最近.link元素，或通过构建关联函数实现需求？

方法1：通过数据关联匹配 #

D3的核心是数据绑定，标签和对应的线条应该共享关联的数据标识（比如每条边的唯一ID）。假设你的边数据（对应.link元素）和标签数据都包含一个唯一的id或linkId字段，那么可以在点击事件中通过这个标识找到对应的线条：

d3.select(this).each(function(d) {
  // 假设d.linkId是标签关联的线条的唯一标识
  const targetLink = _d3.select(`.link[data-link-id="${d.linkId}"]`);
  if (d.lineStyle === "Confirmed") {
    targetLink.style('stroke', '#444')
              .style('stroke-dasharray', '0');
  } else if (d.lineStyle === "Unconfirmed") {
    targetLink.style('stroke-dasharray', '8, 5');
  }
});

同时，在绘制.link元素时，要把这个标识绑定为数据属性：

// 绘制线条时的代码
links.selectAll('.link')
  .data(linkData)
  .enter()
  .append('line')
  .attr('class', 'link')
  .attr('data-link-id', d => d.id) // 添加关联标识
  // 其他样式和属性设置

方法2：通过DOM结构关联 #

如果标签和线条是在同一个父容器下（比如每个边的组里包含线条和标签），可以通过遍历父元素找到对应的线条：

d3.select(this).each(function(d) {
  // 找到当前标签所在的父容器，再从中选择.link元素
  const targetLink = _d3.select(this.parentNode).select('.link');
  if (d.lineStyle === "Confirmed") {
    targetLink.style('stroke', '#444')
              .style('stroke-dasharray', '0');
  } else if (d.lineStyle === "Unconfirmed") {
    targetLink.style('stroke-dasharray', '8, 5');
  }
});

注意：这种方式要求DOM结构是每个边对应一个组（<g>），组内包含线条和标签，比如：

<g class="edge-group">
  <line class="link"></line>
  <text class="label"></text>
</g>

方法3：直接绑定线条元素到标签数据 #

在创建标签时，直接把对应的线条DOM元素存储到标签的数据对象中：

// 绘制线条时
const linkElements = links.selectAll('.link')
  .data(linkData)
  .enter()
  .append('line')
  .attr('class', 'link');

// 绘制标签时，把对应的线条元素关联到标签数据
labels.selectAll('.label')
  .data(labelData)
  .enter()
  .append('text')
  .attr('class', 'label')
  .each(function(d) {
    // 找到当前标签对应的线条元素（假设d.linkIndex是线条在数据中的索引）
    d.correspondingLink = linkElements.nodes()[d.linkIndex];
  })
  .on('click', function(d) {
    const targetLink = _d3.select(d.correspondingLink);
    // 样式设置逻辑同前
    if (d.lineStyle === "Confirmed") {
      targetLink.style('stroke', '#444')
                .style('stroke-dasharray', '0');
    } else if (d.lineStyle === "Unconfirmed") {
      targetLink.style('stroke-dasharray', '8, 5');
    }
  });

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