如何在d3中将文本标签在一个轴上单独着色？

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200);

// 创建一个线性比例尺
var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([50, 450]);

// 创建一个x轴
var xAxis = d3.axisBottom(xScale);

// 在SVG容器中添加x轴
svg.append("g")
  .attr("transform", "translate(0, 100)")
  .call(xAxis);

// 在x轴上添加文本标签，并设置颜色
svg.append("text")
  .attr("x", 50)
  .attr("y", 120)
  .text("Label 1")
  .style("fill", "red");

svg.append("text")
  .attr("x", 250)
  .attr("y", 120)
  .text("Label 2")
  .style("fill", "blue");

svg.append("text")
  .attr("x", 450)
  .attr("y", 120)
  .text("Label 3")
  .style("fill", "green");