如何在D3.js v3组织图中处理长职位文本：换行或添加Tooltip

为什么你的CSS无效？ #

SVG的<text>元素不支持CSS的word-wrap属性，所以你设置的样式不会生效，必须通过D3的逻辑来处理文本换行或tooltip。

方案一：截断文本+Hover显示完整内容 #

保留文本截断逻辑，同时给文本元素添加原生tooltip，hover时显示完整职位名称：

nodeGroup.append("text")
  .attr("x", dynamic.nodeTextLeftMargin)
  .attr("y", dynamic.nodePositionNameTopMargin)
  .attr('class', 'emp-position-name')
  .attr("dy", ".35em")
  .attr("text-anchor", "left")
  .text(function(d) {
     var position =  d.positionName.substring(0,27);
     if(position.length < d.positionName.length){
       position = position.substring(0,24)+'...'
     }
     return position;
  })
  // 添加原生title，hover显示完整内容
  .append("title")
  .text(function(d) { return d.positionName; });

这个方案无需额外CSS，浏览器原生支持tooltip，实现成本低。

方案二：固定宽度下自动换行显示完整文本 #

通过D3将文本拆分为多个<tspan>元素，实现SVG文本的自动换行：

1. 定义换行工具函数 #

// 文本换行函数：适配D3.js v3
function wrapText(text, maxWidth) {
  text.each(function() {
    var textEl = d3.select(this),
        words = textEl.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNum = 0,
        lineHeight = 1.2, // 行高倍数，可根据需求调整
        y = textEl.attr("y"),
        dy = parseFloat(textEl.attr("dy")),
        // 初始化第一行tspan
        tspan = textEl.text(null).append("tspan")
          .attr("x", textEl.attr("x"))
          .attr("y", y)
          .attr("dy", dy + "em");

    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      // 计算当前行宽度，超过最大宽度则换行
      if (tspan.node().getComputedTextLength() > maxWidth) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        // 添加新行tspan
        tspan = textEl.append("tspan")
          .attr("x", textEl.attr("x"))
          .attr("y", y)
          .attr("dy", ++lineNum * lineHeight + dy + "em")
          .text(word);
      }
    }
  });
}

2. 修改节点文本代码 #

去掉原截断逻辑，调用换行函数：

nodeGroup.append("text")
  .attr("x", dynamic.nodeTextLeftMargin)
  .attr("y", dynamic.nodePositionNameTopMargin)
  .attr('class', 'emp-position-name')
  .attr("dy", ".35em")
  .attr("text-anchor", "left")
  .text(function(d) { return d.positionName; })
  // 调用换行函数，传入允许的最大宽度（根据你的节点宽度调整，比如200）
  .call(wrapText, 200);

3. 可选CSS调整 #

可以添加CSS优化多行文本的样式：

.node-group .emp-position-name {
  fill: black;
  font-size: 11px;
}
.node-group .emp-position-name tspan {
  white-space: pre; /* 保留空格 */
}

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