如何在D3.js柱状图Y轴固定显示Low/Medium/High刻度文本？

要实现Y轴固定显示"Low"、"Medium"、"High"三个文本，核心是手动指定刻度位置并替换刻度文本，同时修正代码执行顺序确保轴正确渲染。

关键修改步骤 #

1. 重新定义Y轴与网格线函数
   不再使用自动生成的ticks(3)，而是手动指定刻度对应的数值位置，并通过tickFormat将数值替换为目标文本：

   // 获取数据最大值
   const maxValue = d3.max(graphData, d => d.value);
   // 定义Y轴：指定三个刻度的数值点，替换文本
   var yAxis = d3.axisLeft(y)
     .tickValues([0, maxValue / 2, maxValue]) // 对应Low/Medium/High的垂直位置
     .tickFormat((d, i) => {
       const labels = ["Low", "Medium", "High"];
       return labels[i];
     });
   
   // 同步修改网格线函数，使用相同的刻度位置
   function make_y_gridlines() {
     return d3.axisLeft(y)
       .tickValues([0, maxValue / 2, maxValue])
       .tickFormat(''); // 隐藏网格线的刻度文本
   }
   

2. 修正代码执行顺序
   原代码中先渲染轴再设置scale的domain，会导致轴使用默认范围而非实际数据范围。需调整为先设置domain，再渲染轴：

   // 先设置Y、X轴的domain
   y.domain([0, maxValue]);
   x.domain(graphData.map(d => d.group)).padding([0.5]);
   
   // 再渲染X、Y轴
   main
     .select('.x-axis')
     .attr('transform', `translate(0, ${height})`)
     .call(xAxis)
     .style('color', '#a4a4a4');
   main
     .select('.y-axis')
     .attr('transform', 'translate(0, 0)')
     .call(yAxis)
     .style('color', '#a4a4a4');
   

3. 保留原有Y轴文本样式
   原代码中Y轴文本的旋转、字体等样式可以继续保留，不影响自定义文本的显示：

   main
     .select('.y-axis')
     .call(yAxis)
     .selectAll('text')
     .attr('class', 'yAxiesText')
     .attr('transform', 'rotate(-90)')
     .attr('y', '-2em')
     .attr('x', '.4em')
     .attr('dy', '.71em')
     .style('font-size', '.8rem')
     .style('text-anchor', 'end')
     .style('font-family', '"Roboto", sans-serif');
   

说明 #

• 若需要固定刻度的垂直位置（比如Low始终在底部，High始终在顶部），上述tickValues的设置方式可保证无论数据最大值如何变化，三个文本都会对应Y轴的底部、中间、顶部位置。
• 如果需要自定义刻度对应的具体数值（比如Low对应0，Medium对应10，High对应20），直接将tickValues改为[0,10,20]即可，同时确保Y轴的domain包含这些数值。

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