如何在D3.js中通过点击事件永久选中折线？

核心问题是mouseout事件会强制重置折线样式，不管你有没有点击过。要实现点击永久高亮，得给元素加个状态标记，让mouseout跳过已高亮的元素。

具体修改步骤： #

1. 用CSS类管理高亮样式（比直接操作style更清晰）
2. 在点击事件里给元素切换高亮类，而非直接修改style
3. 在mouseover和mouseout里判断元素是否有高亮类，有就不执行默认样式逻辑
4. 修正原代码里的语法错误（比如事件名引号漏写、参数缺失、dataByCountry应改用事件传入的d）

修改后的完整代码： #

/* 先定义高亮类，放在你的样式文件里 */
.highlighted {
  stroke: red !important;
  stroke-width: 7 !important;
}

diagam.on('click', countryClick)
      .on('mouseover', countryOver)  /* 修正引号和逗号错误 */
      .on('mouseout', countryOut);   /* 修正引号和逗号错误 */

// 鼠标事件函数
function countryOver(event, d) {
    // 仅对未高亮的元素应用hover样式
    if (!d3.select(this).classed('highlighted')) {
        d3.select(this)
            .style('stroke', 'black')
            .style('stroke-width', 5);
    }
    // 处理文本（改用事件传入的d，避免依赖全局变量）
    d3.select(this)
      .selectAll('.tile-text') /* 先移除已有文本，避免重复添加堆积 */
      .remove()
      .exit()
      .append('text')
      .attr('class', 'tile-text')
      .attr('x', x(d.year) / 2)
      .attr('y', y(d.value) / 2)
      .attr('text-anchor', 'middle')
      .attr('font-size', '50')
      .attr('fill', 'black')
      .text(d.name);
}

function countryOut(event, d) { /* 补全缺失的参数d */
    // 仅对未高亮的元素重置样式
    if (!d3.select(this).classed('highlighted')) {
        d3.select(this)
            .style('stroke', 'green')
            .style('stroke-width', 1.5);
    }
    // 移除hover时的文本
    d3.select(this)
      .selectAll('.tile-text')
      .remove();
}

function countryClick(event, d){
    // 切换高亮类，点击一次添加，再点击一次取消
    const isHighlighted = d3.select(this).classed('highlighted');
    d3.select(this)
      .classed('highlighted', !isHighlighted)
      // 取消高亮时恢复默认样式
      .style('stroke', isHighlighted ? 'green' : null)
      .style('stroke-width', isHighlighted ? 1.5 : null);
}

关键说明： #

• 用.highlighted类标记已点击的折线，CSS里的!important确保优先级高于hover样式
• mouseover/mouseout先判断.highlighted类，存在则跳过样式修改
• 点击事件通过切换类实现高亮/取消高亮，同时处理取消时的样式恢复
• 修复了原代码中重复添加文本的问题，每次hover先移除旧文本再添加

内容的提问来源于stack exchange，提问作者Mr.Muu