如何在D3.js柱状图中修改坐标轴刻度文本？

嘿，我来帮你搞定这个D3坐标轴刻度文本的问题！你的代码没生效其实是个小细节没注意到，咱们一步步来解决：

首先说下你原代码的问题：tickFormat的回调函数里你用了text变量，但实际上D3会把当前的刻度值（也就是你的CSV列头，比如"food"）传给回调的第一个参数，你应该用这个参数来判断，而不是未定义的text。

接下来给你两种实用的解决方案，都不用修改CSV列名：

方法1：用映射表（推荐，方便后续扩展） #

先做一个列名和目标显示文本的对应表，之后要改其他刻度直接加进去就行：

// 先定义好列名到显示文本的映射
const scaleLabels = {
  "food": "Food, drinks and tobacco",
  // 要是还有其他列要改，直接加在这里就行，比如：
  // "trans": "Transportation and communication"
};

// 然后创建x轴的时候用这个映射表
const xAxis = d3.axisBottom(xScale)
  .tickFormat(function(d) {
    // 找到对应文本就返回，找不到就用原列名
    return scaleLabels[d] || d;
  });

方法2：直接在回调里判断 #

如果只有这一个刻度要改，也可以直接写判断：

const xAxis = d3.axisBottom(xScale)
  .tickFormat(function(d) {
    // 这里要用参数d，不是你之前的text！
    if (d === "food") {
      return "Food, drinks and tobacco";
    }
    // 其他刻度保持原来的文本
    return d;
  });

这样修改之后，x轴上原本显示"food"的刻度就会变成你想要的长文本了，完全不用动CSV文件，完美避开列名带空格的麻烦~

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