D3条形图x轴左对齐

// 假设我们有以下数据
const data = [
  { name: 'A', value: 30 },
  { name: 'B', value: 80 },
  { name: 'C', value: 45 },
  // ...更多数据
];

// 设置 SVG 容器的大小
const svg = d3.select('svg')
  .attr('width', 600)
  .attr('height', 400);

// 创建 x 轴比例尺
const x = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([0, 500]) // 设置 x 轴的范围
  .padding(0.1); // 条形之间的间距

// 创建 y 轴比例尺
const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([300, 0]); // 注意 y 轴是从上到下的

// 添加 x 轴
svg.append('g')
  .attr('transform', 'translate(50, 350)') // 将 x 轴移动到左下角
  .call(d3.axisBottom(x));

// 添加 y 轴
svg.append('g')
  .attr('transform', 'translate(50, 50)') // 将 y 轴移动到左上角
  .call(d3.axisLeft(y));

// 绘制条形图
svg.selectAll('.bar')
  .data(data)
  .enter().append('rect')
  .attr('class', 'bar')
  .attr('x', d => x(d.name) + 50) // 条形图的 x 坐标
  .attr('y', d => y(d.value)) // 条形图的 y 坐标
  .attr('width', x.bandwidth()) // 条形的宽度
  .attr('height', d => 300 - y(d.value)); // 条形的高度