如何更改x轴刻度的文本？

// 引入D3.js库
import * as d3 from 'd3';

// 创建SVG容器
const svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 300);

// 假设已有数据
const data = [10, 20, 30, 40, 50];

// 创建x轴比例尺
const xScale = d3.scaleBand()
  .domain(data.map(d => d))
  .range([0, 400])
  .padding(0.2);

// 创建x轴
const xAxis = d3.axisBottom(xScale);

// 添加x轴到SVG容器
svg.append('g')
  .attr('transform', 'translate(50, 250)')
  .call(xAxis);

// 获取刻度文本元素
const tickTexts = svg.selectAll('.tick text');

// 修改刻度文本内容
tickTexts.text((d, i) => `Value ${i}`);

// 修改刻度文本样式
tickTexts.attr('fill', 'red')
  .attr('font-size', '12px');