时间戳

首页 > 解决方案 > D3.js 条形图比例/范围问题。条形图太低

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

问题描述

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

标签： javascriptd3.jscodepen

解决方案

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

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

教程让我们制作一个条形图，第 4 部分解释了如何执行此操作。

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

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

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

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

推荐阅读