Javascript D3图表显示不正确

我已经花了几个小时试图理解为什么我的图表看起来会有很大的不同，正如你从下面的代码中可以看到的。仅供参考，这是FCC在数据可视化方面面临的挑战之一。 我在这里犯了什么错误

const svg_width=1000；
const svg_height=750；
常量边距={
排名前40位，
“底部”：40，
左:60,，
右:60,，
}
var svg=d3。选择（“图表容器”）
.append（“svg”）
.attr（“宽度”，svg_宽度）
.attr（“高度”，svg_高度）
.style（“边框”、“实体”）
d3.json（“https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json，函数（数据）{
var数据集=data.data
var parseDates=d3.timeParse（“%Y-%m-%d”）
var xScale=d3.scaleTime（）
.domain（[d3.min（数据集，（d）=>parseDates（d[0]）），
max（数据集，（d）=>parseDates（d[0]））
.range（[margin.left，svg_width-margin.right]）
var xAxis=d3.axisBottom（）
.scale（xScale）
.滴答器（0）
svg.append（“g”）
.attr（“transform”（“translate（0）”+（svg_height-margin.bottom）+”））
.call（xAxis.ticks（d3.timeYear.ticks（10））
var yScale=d3.scaleLinear（）
.domain（[d3.min（数据集，（d）=>d[1]），
d3.max（数据集，（d）=>d[1]））
.range（[svg_height-margin.bottom，margin.bottom]）
var yAxis=d3.axisLeft（）
.刻度（yScale）
.滴答器（0）
svg.append（“g”）
.呼叫（yAxis）
.attr（“转换”、“转换（60，0）”）
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d）=>xScale（解析日期（d[0]））
.attr（“y”，（d）=>（svg_height-margin.top）-yScale（d[1]））
.attr（“宽度”，1）
.attr（“高度”（d）=>yScale（d[1]））
.attr（“填充”、“绿色”）
});
当您绘制条形图时，您的
高度
和
y
计算是相反的


const svg_width=1000；
const svg_height=750；
常量边距={
排名前40位，
“底部”：40，
左:60,，
右:60,，
}
var svg=d3。选择（“图表容器”）
.append（“svg”）
.attr（“宽度”，svg_宽度）
.attr（“高度”，svg_高度）
.style（“边框”、“实体”）
d3.json（“https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json，函数（数据）{
var数据集=data.data
var parseDates=d3.timeParse（“%Y-%m-%d”）
var xScale=d3.scaleTime（）
.domain（[d3.min（数据集，（d）=>parseDates（d[0]）），
max（数据集，（d）=>parseDates（d[0]））
.range（[margin.left，svg_width-margin.right]）
var xAxis=d3.axisBottom（）
.scale（xScale）
.滴答器（0）
svg.append（“g”）
.attr（“transform”（“translate（0）”+（svg_height-margin.bottom）+”））
.call（xAxis.ticks（d3.timeYear.ticks（10））
var yScale=d3.scaleLinear（）
.domain（[d3.min（数据集，（d）=>d[1]），
d3.max（数据集，（d）=>d[1]））
.range（[svg_height-margin.bottom，margin.bottom]）
var yAxis=d3.axisLeft（）
.刻度（yScale）
.滴答器（0）
svg.append（“g”）
.呼叫（yAxis）
.attr（“转换”、“转换（60，0）”）
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d）=>xScale（解析日期（d[0]））
.attr（“y”，（d）=>yScale（d[1]））
.attr（“宽度”，1）
.attr（“高度”（d）=>（svg_高度-margin.top）-yScale（d[1]））
.attr（“填充”、“绿色”）
});