D3.js矩阵标签空格消失问题：为何添加的空格无法显示？

这问题我之前做D3矩阵可视化的时候也碰到过！其实原因很简单——SVG的<text>元素默认会合并连续的空白字符（包括前导空格、多个连续空格），所以你输入的前导空格都被自动忽略了，只显示后面的"word"。

下面给你两种实用的解决办法，选哪种都能搞定：

方案1：用CSS样式强制保留空格 #

这是最推荐的方法，不用修改你的标签数组，只要在绘制行/列标签的文本元素时，添加white-space: pre样式即可：

// 以绘制行标签为例，给text元素添加样式
svg.selectAll(".row-label")
  .data(rowLabel)
  .enter()
  .append("text")
  .text(d => d)
  .style("white-space", "pre") // 关键：保留所有空格
  // 其他位置、字体等样式设置...

white-space: pre会让文本像在<pre>标签里一样，严格保留所有空格和换行符，完美解决前导空格被吃掉的问题。如果希望空格所在的文本能自动换行，也可以用white-space: pre-wrap。

方案2：用非断空格代替普通空格 #

如果不想调整样式，也可以把标签里的普通空格换成HTML的非断空格实体 ，但要注意D3的.text()方法会转义HTML实体，所以得用.html()来渲染内容：

// 修改标签数组，把空格替换成 
rowLabel = ['     word','word2' ];
colLabel = ['  word3','word4','word5'];

// 绘制标签时用.html()代替.text()
svg.selectAll(".col-label")
  .data(colLabel)
  .enter()
  .append("text")
  .html(d => d) // 用html方法解析实体
  // 其他位置、样式设置...

不过这种方法需要手动替换空格，灵活性不如第一种，优先推荐用CSS样式的方案。

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