如何在图形的条上方设置单个标记

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

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

// 准备数据集
const data = [
  { value: 10, label: 'A' },
  { value: 20, label: 'B' },
  { value: 15, label: 'C' },
  { value: 25, label: 'D' }
];

// 绘制条形图
const bars = svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 50)
  .attr('y', (d) => 300 - d.value * 10)
  .attr('width', 40)
  .attr('height', (d) => d.value * 10)
  .attr('fill', 'steelblue');

// 添加标记
const labels = svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .text((d) => d.label)
  .attr('x', (d, i) => i * 50 + 20)
  .attr('y', (d) => 300 - d.value * 10 - 5)
  .attr('text-anchor', 'middle')
  .attr('fill', 'white');

// 样式调整
labels.attr('font-size', '12px');

// 添加交互功能（示例）
bars.on('mouseover', (d) => {
  // 鼠标悬停时的操作
  console.log(`Value: ${d.value}`);
})
.on('click', (d) => {
  // 点击时的操作
  console.log(`Label: ${d.label}`);
});