D3(v3)层级边束图标签含括号时悬停高亮失效问题

• 开发环境：基于D3 v3开发层级边束（hierarchical edge bundle）图表
• 业务需求：节点文本标签需支持包含括号的内容，例如数据字段配置为"name":"root.b.yes(1)"
• 故障现象：名称中加入括号后，鼠标悬停标签触发的连线高亮功能完全失效，控制台抛出DOM异常，明确提示#node-yes(1)不属于合法的querySelector选择器
• 复现规则：移除data.json中数据项名称的括号时，悬停高亮功能运行正常；保留括号时高亮无任何响应
• 约束条件：已知高版本D3已原生兼容标签包含括号的场景，但项目受限必须使用D3 v3，无法通过升级版本解决问题
• 配套材料：已提供可稳定复现问题的最小示例代码，覆盖完整HTML逻辑、测试JSON数据、CSS样式

根据CSS选择器规范，括号(、)属于选择器语法的特殊元字符，直接拼接在ID选择器字符串中时，querySelector会将括号识别为伪类、函数式选择器的语法标记，无法匹配到实际ID包含括号字符的DOM节点，因此抛出选择器非法的异常。D3 v3的元素选择逻辑直接封装原生querySelector实现，未对ID中的特殊字符做自动转义处理；高版本D3内置了特殊字符自动转义逻辑，因此不会触发该问题。

方案1：转义选择器中的特殊字符（改动最小，优先推荐） #

在拼接ID选择器的代码位置，对名称中的CSS特殊字符做转义处理：按照CSS选择器规则，特殊字符前需要加反斜杠转义，由于JS字符串中反斜杠本身需要转义，因此每个特殊字符前要加两个反斜杠。
参考实现代码：

// 转义CSS选择器特殊字符
function escapeSelector(str) {
  return str.replace(/([()!"#$%&'*+,.\/:;<=>?@\[\\\]^`{|}~])/g, '\\$1')
}

// 原有选择逻辑（示例）：d3.select('#node-' + d.name)
// 修改为转义后再传入选择器
d3.select('#node-' + escapeSelector(d.name))

该方案无需修改原有数据结构、节点ID生成规则，仅调整选择器拼接逻辑即可生效，对现有代码侵入性最低。

方案2：节点ID生成阶段替换特殊字符 #

在给节点设置id属性的环节，直接将名称中的括号等特殊字符替换为ID允许的合法字符（如下划线、短横线），同时统一ID生成规则，悬停选择时直接使用规则生成的合法ID查询即可。
参考实现代码：

// 统一生成合法DOM ID
function getValidNodeId(name) {
  return 'node-' + name.replace(/[()]/g, '_')
}

// 节点渲染时设置ID
node.append("text")
  .attr("id", d => getValidNodeId(d.name))
  // 其余渲染逻辑保持不变

// 悬停事件中选择节点时，调用同一方法生成ID
d3.select('#' + getValidNodeId(d.name))

该方案适合需要兼容极老旧浏览器（对CSS转义选择器支持不佳）的场景，注意所有ID生成、查询的逻辑必须统一，避免出现ID不匹配的问题。

方案3：绕过CSS选择器解析，使用原生ID查询方法 #

如果不想处理转义或字符替换逻辑，可以直接使用document.getElementById获取节点，该方法接收纯字符串格式的ID，不会解析CSS选择器语法，带括号的ID可以被直接识别，拿到原生DOM节点后再包装为D3选择集即可。
参考实现代码：

// 原有选择逻辑
// const targetNode = d3.select('#node-' + d.name)
// 修改为原生方法取节点后包装
const targetNode = d3.select(document.getElementById('node-' + d.name))

该方案无需对ID做任何转义或替换，代码改动量极小，适配所有支持D3 v3的浏览器环境。

以上三种方案均完全兼容D3 v3 API，无需升级D3版本，可根据项目现有代码结构选择最适配的实现方式。

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