如何使刻度与条形的宽度相同

// 假设我们有以下数据
const data = [4, 8, 15, 16, 23, 42];

// 设置SVG容器的大小
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

// 设置条形图的宽度和间距
const barWidth = width / data.length;
const barPadding = 0; // 设置条形之间的间距为0

// 创建比例尺
const x = d3.scaleBand()
            .domain(data.map((d, i) => i))
            .range([0, width])
            .padding(barPadding);

const y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

// 添加条形
svg.selectAll(".bar")
   .data(data)
   .enter().append("rect")
     .attr("class", "bar")
     .attr("x", (d, i) => x(i))
     .attr("y", d => y(d))
     .attr("width", x.bandwidth())
     .attr("height", d => height - y(d));

// 添加刻度线
svg.selectAll(".tick")
   .data(data)
   .enter().append("line")
     .attr("class", "tick")
     .attr("x1", (d, i) => x(i) + x.bandwidth() / 2)
     .attr("y1", d => y(d))
     .attr("x2", (d, i) => x(i) + x.bandwidth() / 2)
     .attr("y2", height);

// 添加刻度标签
svg.selectAll(".tick-label")
   .data(data)
   .enter().append("text")
     .attr("class", "tick-label")
     .attr("x", (d, i) => x(i) + x.bandwidth() / 2)
     .attr("y", height + 15)
     .style("text-anchor", "middle")
     .text((d, i) => i);