基于标签关联切换D3.js中<line>元素样式/属性的问题求助

问题描述 #

• 力导向图中多个标签绑定到对应的<line>路径元素，点击标签会更新关联线条的样式，但切换点击其他标签时，之前被修改的线条样式未被清除
• 单个标签场景可通过.selectAll结合class属性实现样式切换，但标签为循环生成，每个对应独立路径，处理逻辑更复杂

原问题代码 #

svg.selectAll('.edgelabel').on('click', function (d) {
  // 箭头函数会导致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');
  }
});

解决方案 #

核心是每次点击标签时，先统一重置所有线条的初始样式，再设置当前点击标签对应线条的样式：

修改后的代码 #

svg.selectAll('.edgelabel').on('click', function (d) {
  // 重置所有文本标签样式
  _d3.selectAll('.nodeText').style('fill', 'black');
  _d3.selectAll('.edgelabel').style('fill', '#999');
  _d3.select(this).style('fill', 'blue');

  // 重置所有线条到初始状态（默认不可见）
  linkEnter
    .style('stroke', 'transparent')
    .style('stroke-dasharray', '0');

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

  if (d.lineStyle === 'Confirmed') {
    thisLine.style('stroke', '#444');
    thisLine.style('stroke-dasharray', '0');
  } else if (d.lineStyle === 'Unconfirmed') {
    thisLine.style('stroke', '#444'); // 根据需求设置Unconfirmed线条颜色
    thisLine.style('stroke-dasharray', '8, 5');
  }
});

关键说明 #

1. 点击事件触发时，先通过linkEnter（线条元素集合）将所有线条重置为初始状态（比如透明不可见），确保之前的样式被完全清除
2. 再针对当前点击标签对应的线条，根据lineStyle字段设置对应样式
3. 如果线条元素有统一类名（如.link），也可以用_d3.selectAll('.link')替代linkEnter来重置所有线条

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