如何遍历海上条形图坐标轴并在条形图上显示值

// 数据集
var dataset = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 15 },
  // 其他条形的数据
];

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

// 设置坐标轴范围和刻度
var xScale = d3.scaleBand()
  .domain(dataset.map(function(d) { return d.name; }))
  .range([0, 400])
  .padding(0.1);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, function(d) { return d.value; })])
  .range([0, 200]);

// 遍历坐标轴并显示条形图
svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.name); })
  .attr("y", function(d) { return 300 - yScale(d.value); })
  .attr("width", xScale.bandwidth())
  .attr("height", function(d) { return yScale(d.value); })
  .attr("fill", "steelblue")
  .on("mouseover", function(d) {
    // 鼠标悬停时显示值
    svg.append("text")
      .attr("class", "value")
      .attr("x", xScale(d.name) + xScale.bandwidth() / 2)
      .attr("y", 300 - yScale(d.value) - 5)
      .attr("text-anchor", "middle")
      .text(d.value);
  })
  .on("mouseout", function() {
    // 鼠标移出时移除值
    svg.select(".value").remove();
  });