我通过将xAxis移动高度减去padding值并调整“rect”的y值和高度值来修复：

import * as d3 from "https://cdn.skypack.dev/[email protected]";

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) => {
      // DATASET RAW
      const dataset = [...data.data];
      // CLEAN DATASET
      const cleanDataset = dataset.map(function (item) {
        return [Number(item[0].slice(0, 4)), item[1]];
      });
      console.log(cleanDataset);
      const minYears = d3.min(cleanDataset, (d) => d[0]);
      const maxYears = d3.max(cleanDataset, (d) => d[0]);
      const minGDP = d3.min(cleanDataset, (d) => d[1]);
      const maxGDP = d3.max(cleanDataset, (d) => d[1]);
      console.log(minYears, maxYears, minGDP, maxGDP);
      const scaleX = d3
        .scaleLinear()
        .domain([minYears, maxYears])
        .range([padding, w - padding]);
      const scaleY = d3
        .scaleLinear()
        .domain([minGDP, maxGDP])
        .range([h - padding, padding]);
      const xAxis = d3.axisBottom(scaleX);
      const yAxis = d3.axisLeft(scaleY);

      svg
        .append("g")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);

      svg
        .append("g")
        .attr("id", "y-axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);

      svg
        .selectAll("rect")
        .data(cleanDataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => scaleX(d[0]))
        .attr("y", (d) => scaleY(d[1]) - padding)
        .attr("width", 4)
        .attr("height", (d) => h - scaleY(d[1]))
        .attr("fill", "lightblue")
        .attr("class", "bar");
    });
});

字符串