如何在d3.js中为颜色图例添加刻度线

// 创建颜色比例尺
var colorScale = d3.scaleOrdinal()
  .domain(["low", "medium", "high"])
  .range(["#00FF00", "#FFFF00", "#FF0000"]);

// 创建SVG元素
var svg = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 100);

// 创建矩形背景
var rect = svg.append("rect")
  .attr("x", 10)
  .attr("y", 10)
  .attr("width", 180)
  .attr("height", 80)
  .style("fill", "none")
  .style("stroke", "black");

// 创建坐标轴
var axis = d3.axisBottom()
  .scale(colorScale)
  .tickSize(10);

// 添加坐标轴到SVG元素
svg.append("g")
  .attr("transform", "translate(20, 50)")
  .call(axis);

// 设置刻度线样式和位置
svg.selectAll(".tick line")
  .style("stroke", "black")
  .attr("y1", -10)
  .attr("y2", 0);

// 设置刻度线文本样式和位置
svg.selectAll(".tick text")
  .style("font-size", "10px")
  .attr("y", 15);