d3.js - 根据标签关系切换 元素上的属性/样式

StackBlitz 演示 https://stackblitz.com/edit/github-dzry6q-agcn5s?file=src%2Fapp%2Fdirected-graph-experiment.service.ts,src%2Fapp%2Fapp.module.ts - stackblitz 在 chrome 中很脆弱 https://github.com/stackblitz/core/issues/162，可能不显示预览。我将 Edge 与 stackBlitz 一起使用，在移动版 chrome 上也很好用。

我创建了这个力导向图，其中有多个标签附加到位于<line>。单击这些标签时，它会更新<line>它涉及到的。问题是，当单击相应路径/线条元素上的另一个标签时，先前的样式状态不会被删除。

如果这是一个标签，则结构会有所不同，并且可以使用.selectall并瞄准.class属性。但由于这些标签是用它们自己的路径和线条循环的，所以变得有点棘手。

第286行相关代码：

svg.selectAll('.edgelabel').on('click', function (d) {
  // arrow function will produce this = undefined
  _d3.selectAll('.nodeText').style('fill', 'black');
  _d3.selectAll('.edgelabel').style('fill', '#999');
  _d3.select(this).style('fill', 'blue');

  const thisLine = linkEnter.filter((e) => e.index === d.index);

  if (d.lineStyle === 'Confirmed') {
    console.log('Confirmed', d.lineStyle);
    thisLine.style('stroke', '#444');
    thisLine.style('stroke-dasharray', '0');
  } else if (d.lineStyle === 'Unconfirmed') {
    console.log('Unconfirmed', d.lineStyle);
    thisLine.style('stroke-dasharray', '8, 5');
  }
});

如果标签的值为确认的它将线条样式设置为一部分，然后未证实应该以另一种方式设计自己的线条，但同时确认的线条需要“消失”样式，这样您就看不到它了。

StackBlitz 演示 https://stackblitz.com/edit/github-dzry6q-agcn5s?file=src%2Fapp%2Fdirected-graph-experiment.service.ts,src%2Fapp%2Fapp.module.ts