自定义D3分组条形图中的网格线

// 假设data是一个包含分组数据的数组
const data = [
  {group: "A", category: "X", value: 30},
  {group: "A", category: "Y", value: 80},
  {group: "B", category: "X", value: 45},
  {group: "B", category: "Y", value: 60}
];

const margin = {top: 20, right: 30, bottom: 40, left: 40};
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

const x = d3.scaleBand()
  .range([0, width])
  .padding(0.1)
  .domain(data.map(d => d.category));

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

// 添加x轴
svg.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x));

// 添加y轴
svg.append("g")
  .call(d3.axisLeft(y));

// 添加网格线
svg.append("g")
  .attr("class", "grid")
  .call(d3.axisLeft(y).ticks(10).tickSize(-width).tickFormat(""));

svg.append("g")
  .attr("class", "grid")
  .call(d3.axisBottom(x).tickSize(-height).tickFormat(""));

// 绘制条形
svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", d => x(d.category))
  .attr("y", d => y(d.value))
  .attr("width", x.bandwidth())
  .attr("height", d => height - y(d.value));