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

【问题标题】：D3.js bar graph scale/range problem. Bar graph too lowD3.js 条形图比例/范围问题。条形图太低
【发布时间】：2020-04-12 12:01:52
【问题描述】：

我已经完成了一个显示美国 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 的解决方案非常有效 - 非常感谢您抽出宝贵时间！

【问题讨论】：

标签： javascript d3.js codepen

【解决方案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]))

【讨论】：