如何将D3.js文本标签的每个字符设置为垂直排列？

嘿，我来帮你搞定标签字符垂直排列的问题！你想要的是让标签里的每个字符单独垂直分散开，像G R A P H L A B L E这样的效果对吧？

你原来的代码是把整个文本放进一个<text>元素里再旋转，这样只会让整个文本竖过来，没法实现单个字符的垂直排列。要达到目标，我们需要把文本拆成单个字符，逐个创建<text>元素，然后给每个字符设置不同的垂直位置就行啦。

下面是修改后的完整代码：

var centerG = g.append('g')
 .attr('x', ((width / 2) - (barWidth / 2)))
 .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// 要显示的标签文本
const labelText = 'GRAPH LABEL';
// 每个字符之间的垂直偏移量（可根据字体大小调整）
const charOffset = 22;

centerG.selectAll('.charLabel')
 .data(labelText.split('')) // 将文本拆分为单个字符的数组
 .enter()
 .append('text')
 .text(d => d) // 每个字符作为文本内容
 .attr("font-family", "Arimo")
 .attr("font-size", "18px")
 .attr("font-weight", "bold")
 .attr("fill", "#FFFFFF")
 .attr("text-anchor", "middle")
 .attr("class", "centerLabelText")
 // 每个字符的垂直位置根据索引偏移
 .attr("y", (d, i) => i * charOffset)
 // 保持水平居中的位置（和你原来的translate一致）
 .attr("transform", "translate(" + ((width / 2) + barOffset) + ", " + yHeight + ")");

关键说明： #

• labelText.split('')：把完整的标签文本拆成单个字符的数组，这样D3可以为每个字符创建独立的文本元素。
• attr("y", (d, i) => i * charOffset)：利用字符的索引i，给每个字符设置递增的y坐标，实现垂直排列的效果。你可以调整charOffset的值来控制字符之间的间距，比如字体是18px的话，设为22px会让字符之间有合适的空隙。
• 去掉了原来的rotate(270)，因为现在我们是直接让字符垂直排列，不需要旋转整个文本啦。如果还是需要让整个标签组处于某个旋转角度，你可以把rotate放到centerG的transform里。

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