D3.js条形图比例/范围问题。条形图太低

Question

我已经完成了一个条形图代码笔，显示了美国的GDP（FCC最受欢迎的一种）。https://codepen.io/le-hu/pen/Baoywgd

我无法消除的问题是这样的-该图并非从svg底部上方50个单位的底部填充开始，而是跨越边界，甚至低于svg边界。我尝试更改所有设置。我敢打赌yScale域或range属性有问题。

  const yScale = d3.scaleLinear()
                   .domain([0,
                     d3.max(data.data, d => d[1])])
                   .range([height - padding, padding]);

代码接缝处将忽略高度-范围设置中的填充部分。 （或我对此的理解）

我希望图表从我们拥有的x轴开始，该图显示的是1950年以上的日期。

就像原来一样：https://codepen.io/freeCodeCamp/pen/GrZVaM

感谢您的见解！

Answer 1

在SVG中，垂直坐标从上到下（reference）。

这使得条形图中垂直条的y坐标和垂直条的height推理变得不那么简单。

教程Let's make a bar chart, part 4说明了如何执行此操作。

矩形的y位置已正确设置为值d[1]之一：

.attr("y", (d, i) => yScale(d[1]))

不过矩形的高度不正确。它应该是原点（值0）与值d[1]的位置之间的距离。如下图所示：

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