D3.js 条形图 scale/range 问题。条形图太低

Question

我已经完成了一个显示美国 GDP 的条形图代码笔（来自 FCC 的流行代码笔）。
https://codepen.io/le-hu/pen/Baoywgd

我无法根除的问题是这样的 - 该图不是从 svg 底部上方 50 单位的底部填充开始，而是跨越边界，我相信甚至低于 svg 边界。我试过改变每一个设置。我敢打赌 yScale 域或范围属性.

有问题

  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

感谢您的任何见解！

Mehdi 的解决方案非常有效 - 非常感谢您抽出宝贵时间！

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]))

D3.js 条形图 scale/range 问题。条形图太低

D3.js bar graph scale/range problem. Bar graph too low

javascript

d3.js

codepen