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

Question

我不明白为什么我的元素渗入底部填充。它阻止我拥有元素。我相信这很简单，一直都是。我只是不知道出了什么问题。我试过改变高度和比例，但它只是改变了我不想改变的东西。我一直在看关于体重秤的教程，但我没有发现任何看起来不对劲的地方。如果我得到我在 codepen 上的项目，这里是 link：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

问题是您没有为 rects

的 height 属性使用正确的值

只需进行以下更改，它就会起作用：

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

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

Bar graph bleeding below y axis D3.js

javascript

d3.js