如何在D3有向图的节点上添加标签？附现有Plnkr示例

嘿，我来帮你搞定直接在节点上显示标签的需求！不用再依赖鼠标悬停触发，我们可以把标签直接渲染在节点旁，还能和节点同步移动。下面是具体的步骤和代码修改建议：

1. 初始化渲染节点标签 #

在你创建节点元素的代码之后，添加一段绑定节点数据的文本标签创建逻辑，设置好初始位置和基础样式：

// 假设你的SVG容器变量是svg，节点数据数组是nodes
const nodeLabels = svg.append("g")
  .selectAll("text")
  .data(nodes)
  .enter()
  .append("text")
  .attr("x", d => d.x + 15) // 偏移节点位置，避免标签和圆形节点重叠
  .attr("y", d => d.y + 5)
  .text(d => d.id) // 用节点的id作为显示标签
  .style("font-size", "12px")
  .style("fill", "#2c3e50")
  .style("pointer-events", "none"); // 关键设置：让鼠标事件穿透到节点，不被标签遮挡

2. 同步标签与节点的动态位置（力导向图场景） #

如果你的图是力导向图（节点会动态移动），需要在tick函数里更新标签位置，确保标签跟着节点一起移动：

function ticked() {
  // 原有更新节点位置的代码保持不变
  node.attr("cx", d => d.x)
      .attr("cy", d => d.y);
  
  // 添加这段代码同步标签位置
  nodeLabels.attr("x", d => d.x + 15)
            .attr("y", d => d.y + 5);
}

3. 移除原悬停显示文本的冗余代码 #

现在标签已经默认显示了，你可以删掉原来mouseover事件里和临时显示文本相关的代码，比如：

// 删掉以下悬停时动态显示文本的代码
textTarget = d 
text.attr('transform', 'translate(' + d.x + ',' + d.y + ')') 
  .text(d.id) 
  .style('display', null)

可选优化：悬停时高亮标签 #

如果想在鼠标悬停节点时同步高亮标签，可以在mouseover和mouseout事件里补充标签样式的修改：

// mouseover时高亮节点和对应标签
d3.select(this)
  .style('fill', colors.nodes.hover)
nodeLabels.filter(d => d.id === textTarget.id)
  .style("fill", colors.nodes.hover)
  .style("font-weight", "bold");

// mouseout时恢复节点和标签的默认样式
d3.select(this)
  .style('fill', colors.nodes.normal)
nodeLabels.filter(d => d.id === textTarget.id)
  .style("fill", "#2c3e50")
  .style("font-weight", "normal");

这样修改后，节点标签就会一直显示在节点旁边，不需要鼠标悬停就能看到啦！

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