Javascript d3的前一个版本与d3的后一个版本兼容吗

数据未加载最新版本的d3，且其不工作 这是链接

var-yMargin=40；
var宽度=800；
var高度=400；
var barWidth=宽度/275；
变量工具提示=d3。选择（“.visHolder”）。追加（“div”）
.attr（“id”、“工具提示”）
.样式（“不透明度”，0）；
var overlay=d3.选择（“.visHolder”）.追加（“div”）
.attr（“类”、“覆盖”）
.样式（“不透明度”，0）；
var svgContainer=d3.选择（“.visHolder”）
.append（“svg”）
.attr（“宽度”，宽度+100）。attr（“高度”，高度+60）；
d3.json（'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json，函数（错误，数据）{
svgContainer.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“x”，-200）
.attr（“y”，80）
.文本（“国内生产总值”）；
svgContainer.append（“文本”）
.attr（“x”，宽度/2+120）
.attr（“y”，高度+50）
.text（'更多信息：http://www.bea.gov/national/pdf/nipaguid.pdf')
.attr（“类别”、“信息”）；
变量年份=data.data.map（函数（项）{
var季度；
var temp=项目[0]。子字符串（5,7）；
如果（温度=“01”）{
quarter=“Q1”；
}否则，如果（温度=“04”）{
quarter=“Q2”；
}否则，如果（温度=“07”）{
季度=“第三季度”；
}否则，如果（温度=“10”）{
季度=“第四季度”；
}
返回项[0]。子字符串（0，4）+“”+四分之一
});
var yearsDate=data.data.map（函数（项）{
返回新日期（项目[0]）；
});
var xMax=新日期（d3.max（yearsDate））；
xMax.setMonth（xMax.getMonth（）+3）；
var xScale=d3.scaleTime（）
.domain（[d3.min（yearsDate），xMax]）
.范围（[0，宽度]）；
var xAxis=d3.axisBottom（）
.比例（xScale）；
var xAxisGroup=svgContainer.append（“g”）
.呼叫（xAxis）
.attr（“id”、“x轴”）
.attr（“转换”、“翻译（60400）”）；
var GDP=data.data.map（函数（项）{
退货项目[1]
});
var scaledGDP=[]；
var-gdpMin=d3.min（GDP）；
var gdpMax=d3.max（GDP）；
变量linearScale=d3.scaleLinear（）
.domain（[0，gdpMax]）
.范围（[0，高度]）；
scaledGDP=GDP.map（函数（项）{
返回线性刻度（项目）；
});
var yAxisScale=d3.scaleLinear（）
.domain（[0，gdpMax]）
.范围（[高度，0]）；
var yAxis=d3.axisLeft（yaxiscale）
var yAxisGroup=svgContainer.append（“g”）
.呼叫（yAxis）
.attr（“id”、“y轴”）
.attr（“转换”、“翻译（60,0）”）；
d3.选择（“svg”）.选择全部（“rect”）
.数据（scaledGDP）
.输入（）
.append（“rect”）
.attr（“日期”，函数（d，i）{
返回数据。数据[i][0]
})
.attr（“数据gdp”，函数（d，i）{
返回数据。数据[i][1]
})
.attr（“类”、“条”）
.attr（“x”，函数（d，i）{
返回xScale（年份日期[i]）；
})
.attr（“y”，函数（d，i）{
返回高度-d；
})
.attr（“宽度”，barWidth）
.attr（“高度”，功能（d）{
返回d；
})
.style（“填充”，“#FD7272”）
.attr（“转换”、“翻译（60,0）”）
.on（“鼠标悬停”，功能（d，i）{
overlay.transition（）
.持续时间（0）
.样式（“高度”，d+“px”）
.样式（“宽度”，条形宽度+“px”）
.style（“不透明度”，.9）
.style（“左”（i*条宽）+0+“px”）
.样式（“顶部”，高度-d+“px”）
.style（“transform”、“translateX（60px）”）；
tooltip.transition（）
.持续时间（200）
.style（“不透明度”，.9）
html（年[i]+“
”+“$”+
GDP[i].toFixed（1）.替换（/（\d）（？=（\d{3}）+\）/g，“$1，”）+“十亿”）
.attr（“日期”，data.data[i][0]）
.样式（“左”，“i*条宽）+30+“px”）
.样式（“顶部”，高度-100+“像素”）
.style（“transform”、“translateX（60px）”）；
})
.开启（“鼠标出”，功能（d）{
tooltip.transition（）
.持续时间（200）
.样式（“不透明度”，0）；
overlay.transition（）
.持续时间（200）
.样式（“不透明度”，0）；
});
});

美国国内生产总值
，旧的
d3.json（，）
已被取代，取而代之的是
d3.json（）.then（）.catch（）

旧的freecodecamp示例是为旧版本的d3编写的

这就是为什么以下方法可以工作，只需很少的更改：


var-yMargin=40；
var宽度=800；
var高度=400；
var barWidth=宽度/275；
变量工具提示=d3。选择（“.visHolder”）。追加（“div”）
.attr（“id”、“工具提示”）
.样式（“不透明度”，0）；
var overlay=d3.选择（“.visHolder”）.追加（“div”）
.attr（“类”、“覆盖”）
.样式（“不透明度”，0）；
var svgContainer=d3.选择（“.visHolder”）
.append（“svg”）
.attr（“宽度”，宽度+100）。attr（“高度”，高度+60）；
d3.json（'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json）。然后（函数（数据）{
svgContainer.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“x”，-200）
.attr（“y”，80）
.文本（“国内生产总值”）；
svgContainer.append（“文本”）
.attr（“x”，宽度/2+120）
.attr（“y”，高度+50）
.text（'更多信息：http://www.bea.gov/national/pdf/nipaguid.pdf')
.attr（“类别”、“信息”）；
变量年份=data.data.map（函数（项）{
var季度；
var temp=项目[0]。子字符串（5,7）；
如果（温度=“01”）{
quarter=“Q1”；
}否则，如果（温度=“04”）{
quarter=“Q2”；
}否则，如果（温度=“07”）{
季度=“第三季度”；
}否则，如果（温度=“10”）{
季度=“第四季度”；
}
返回项[0]。子字符串（0，4）+“”+四分之一
});
var yearsDate=data.data.map（函数（项）{
返回新日期（项目[0]）；
});
var xMax=新日期（d3.max（yearsDate））；
xMax.setMonth（xMax.getMonth（）+3）；
var xScale=d3.scaleTime（）
.domain（[d3.min（yearsDate），xMax]）
.范围（[0，宽度]）；
var xAxis=d3.axisBottom（）
.比例（xScale）；
var xAxisGroup=svgContainer.append（“g”）
.呼叫（xAxis）
.attr（“id”、“x轴”）
.attr（“转换”、“翻译（60400）”）；
var GDP=data.data.map（函数（项）{
退货项目[1]；
});
var scaledGDP=[]；