D3.js柱状图Y轴标签格式问题：如何添加多空格分隔文本

我太懂你这个困扰了！为啥加四个空格却只显示一个？因为SVG的<text>元素默认会把连续的多个空格合并成单个，就跟HTML里的普通文本一样，直接打空格根本不管用。给你两个实用的解决办法：

方法一：用Unicode非断空格字符 #

SVG支持Unicode的非断空格（\u00A0），这种空格不会被合并。直接修改你的tickFormat函数，把普通空格换成四个\u00A0就行：

var yAxis = d3.axisLeft(y)
  .tickSize(3)
  .tickFormat(function(d, i) {
    // 用四个Unicode非断空格分隔频道名和浏览量
    return d + "\u00A0\u00A0\u00A0\u00A0" + TOP_TEN_CHANNELS[i].views;
  });

方法二：设置文本的white-space样式 #

另一种思路是让SVG文本保留原始的空格格式，只需要给Y轴的所有tick文本添加white-space: pre样式，这样普通空格就能正常显示多个了：

首先修改tickFormat直接用四个普通空格：

var yAxis = d3.axisLeft(y)
  .tickSize(3)
  .tickFormat(function(d, i) {
    return d + "    " + TOP_TEN_CHANNELS[i].views; // 四个普通空格
  });

然后在生成Y轴之后，给所有tick文本设置样式：

// 假设你把Y轴添加到了SVG中
svg.append("g")
  .attr("class", "y-axis")
  .call(yAxis)
  // 选择所有tick文本，设置保留空格
  .selectAll(".tick text")
  .style("white-space", "pre");

两种方法都能解决你的问题，选哪个看你习惯就行～

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