条形图在 y 轴下方出血 D3.js

Question

我无法弄清楚为什么我的元素会渗入底部填充物。 它阻止我拥有一个元素。 我相信这很简单，它总是如此。 我只是不知道出了什么问题。 我试过改变高度和比例，但它只是改变了我不想改变的东西。 我一直在看有关秤的教程，但没有发现任何似乎不对劲的东西。 如果我在 codepen 上有项目，这里是链接： https://codepen.io/critchey/pen/YzEXPrP

这是一个屏幕截图，可以知道我在说什么：

这是 javascript：

  //Mapping dataset to its x and y axes
  const xData = dataset.map(d => {
    let date = new Date(d[0]);
    return date;
  });
  
  const xDates = xData.map(d => {
    let dateFormatted = d.toLocaleString("default", {month: "short"}) + ' ' + d.getDate() + ', ' + d.getFullYear()
    return dateFormatted;
  });
  
  const yData = dataset.map(d => d[1]);
  //Variable for use inside D3
  const h = 400;
  const w = 800;
  const pad = 40;
  
  //Scales for the SVG element
  const xDateScale = d3.scaleTime()
                .domain([0, w])
                .range([pad, w - pad]);
  const xScale = d3.scaleLinear()
                .domain([0, yData.length])
                .range([pad, w - pad]);
  const yScale = d3.scaleLinear()
                .domain([0, d3.max(yData, (d) => d)])
                .range([h - pad, pad]);

  //Declaring the SVG element
  const svg = d3.select('#svg-container')
                .append('svg')
                .attr('width', w)
                .attr('height', h)
  
  //Declaring each bar
  svg.selectAll('rect')
      .data(yData)
      .enter()
      .append('rect')
      .attr('x', (d, i) => xScale(i))
      .attr('y', (d, i) => yScale(d))
      .attr("width", w / (yData.length - pad * 2))
      .attr("height", (d, i) => d)
      .attr("class", "bar")
      .append('title')
      .text((d, i) => 'GDP: ' + d + ' | Date: ' + xDates[i])
 
  //Axes Declarations
  const xAxis = d3.axisBottom(xDateScale);
  const yAxis = d3.axisLeft(yScale);
    
  svg.append("g")
      .attr("transform", "translate(0," + (h - pad / 2) + ")")
      .call(xAxis);
  svg.append("g")
      .attr("transform", "translate(" + pad + ",0)")
      .call(yAxis)

Answer 1

问题是您没有为您的rect使用具有height属性的正确值

只需进行以下更改，它应该可以工作：

.attr("height", (d, i) => yScale(0) - yScale(d))