D3.js中X轴沿SVG画布边界渲染且不可见的问题

问题分析 #

1. X轴被渲染到SVG外部：X轴容器的transform属性中，Y偏移量设置为h（SVG高度），导致轴完全在SVG可视区域外，需调整为h - padding让轴位于SVG内部底部。
2. 柱状图高度计算错误：当前柱子高度直接使用原始GDP值，未结合Y轴比例尺转换，导致柱子高度超出SVG范围或显示异常。
3. 年份数据处理不合理：原数据为季度GDP，直接提取年份会导致多个柱子对应同一X轴位置，线性比例尺不适合时间序列数据，应改用时间比例尺。

修复后的代码 #

import * as d3 from "https://cdn.skypack.dev/d3@7.8.2";

const url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";

const w = 900;
const h = 460;
const padding = 30;
const svg = d3.select("main").append("svg").attr("width", w).attr("height", h);

document.addEventListener("DOMContentLoaded", () => {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // 解析时间格式，保留原始GDP值
      const dataset = data.data.map(item => [new Date(item[0]), item[1]]);
      
      // 创建时间比例尺处理X轴
      const scaleX = d3.scaleTime()
        .domain(d3.extent(dataset, d => d[0]))
        .range([padding, w - padding]);
      
      // Y轴比例尺保持线性，调整计算逻辑
      const scaleY = d3.scaleLinear()
        .domain([0, d3.max(dataset, d => d[1])])
        .range([h - padding, padding]);
      
      const xAxis = d3.axisBottom(scaleX);
      const yAxis = d3.axisLeft(scaleY);

      // 绘制柱状图，修正x、height属性
      svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => scaleX(d[0]))
        .attr("y", d => scaleY(d[1]))
        .attr("width", (w - 2 * padding) / dataset.length) // 根据数据量自动计算宽度
        .attr("height", d => h - padding - scaleY(d[1])) // 正确计算柱子高度
        .attr("fill", "lightblue")
        .attr("class", "bar");

      // 修正X轴位置，移到SVG内部
      svg.append("g")
        .attr("transform", `translate(0, ${h - padding})`)
        .call(xAxis);

      // 可选：添加Y轴
      svg.append("g")
        .attr("transform", `translate(${padding}, 0)`)
        .call(yAxis);
    });
});

关键修改点说明 #

• X轴位置修正：将transform的Y值从h改为h - padding，确保轴显示在SVG内部底部。
• 柱子高度计算：用h - padding - scaleY(d[1])计算高度，匹配Y轴从底部到顶部的range逻辑，得到正确的柱子高度。
• 时间比例尺替换：使用scaleTime处理原始日期数据，避免同一年份的柱子重叠，让X轴刻度分布更合理。
• 柱子宽度优化：根据数据总量自动计算宽度，避免固定宽度导致的溢出或间距不合理问题。

内容的提问来源于stack exchange，提问作者Emiliano