D3.js中exit()/update()/merge()问题：点击切换连线样式与文本

1. 拆分初始化与更新逻辑，直接操作已有元素 #

把连线和文本的创建（初始化）与样式文本修改（更新）彻底分开，不要在点击事件里重复走完整的enter()流程：

// 页面加载时只执行一次：初始化连线、文本，绑定点击事件
const links = svg.selectAll('.link')
  .data(linkData)
  .enter()
  .append('line')
  .attr('class', 'link')
  .attr('stroke', 'red')
  .attr('stroke-width', 2)
  .attr('stroke-dasharray', d => d.isDashed ? '5,5' : 'none')
  .on('click', function(event, d) {
    // 点击时直接切换状态并更新当前元素，不用全量重绘
    d.isDashed = !d.isDashed;
    // 更新连线样式
    d3.select(this).attr('stroke-dasharray', d.isDashed ? '5,5' : 'none');
    // 更新对应文本标签（给数据加唯一id，通过属性快速定位）
    svg.select(`.link-label[data-id="${d.id}"]`)
      .text(d.isDashed ? 'dasharray' : 'clear');
  });

// 初始化文本标签，添加唯一标识方便后续查找
const linkLabels = svg.selectAll('.link-label')
  .data(linkData)
  .enter()
  .append('text')
  .attr('class', 'link-label')
  .attr('data-id', d => d.id)
  .text(d => d.isDashed ? 'dasharray' : 'clear')
  .attr('x', d => (d.source.x + d.target.x)/2)
  .attr('y', d => (d.source.y + d.target.y)/2);

这里的核心是：点击时只操作当前被点击的连线元素，通过数据唯一标识快速定位对应文本，全程不碰enter()或merge()，完全避免重绘。

2. 若必须用enter-update-exit模式，只更新变化的属性 #

如果你的场景需要动态增删连线，必须保留完整的enter-update-exit流程，那要确保update阶段只修改需要变化的属性，不要重复设置初始化时已经固定的属性：

function updateLinkState() {
  // 绑定数据，获取选择集
  const linkSel = svg.selectAll('.link').data(linkData);
  const labelSel = svg.selectAll('.link-label').data(linkData);

  // 仅处理新增元素（如果有）
  linkSel.enter()
    .append('line')
    .attr('class', 'link')
    .attr('stroke', 'red')
    .attr('stroke-width', 2)
    .on('click', function(event, d) {
      d.isDashed = !d.isDashed;
      updateLinkState();
    });

  // 只更新样式，不碰其他已固定的属性
  linkSel.merge(linkSel.enter())
    .attr('stroke-dasharray', d => d.isDashed ? '5,5' : 'none');

  // 文本标签同理，仅更新内容
  labelSel.enter()
    .append('text')
    .attr('class', 'link-label')
    .attr('x', d => (d.source.x + d.target.x)/2)
    .attr('y', d => (d.source.y + d.target.y)/2);

  labelSel.merge(labelSel.enter())
    .text(d => d.isDashed ? 'dasharray' : 'clear');
}

这种方式下，merge()之后只修改stroke-dasharray和text，浏览器只会更新这些变化的属性，不会重绘整个元素。

3. 用数据维护状态，避免反向查询DOM #

在你的连线数据对象里加一个isDashed字段，点击时直接切换这个字段的值，再根据值更新DOM，不要通过读取DOM的stroke-dasharray来判断状态——后者会增加DOM查询开销，还容易出错。

常见坑点 #

• 不要在点击事件里重复执行selectAll().data().enter().append()，这会导致旧元素被重新绑定数据，甚至重复创建，必然引发重绘。
• 不要在merge()后重复设置所有属性（比如每次都重新设stroke、stroke-width），只更新需要变化的部分，减少浏览器重排重绘的开销。

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