ReferenceError: d3没有定义自由代码营

Question

我目前正在做我的第一个免费代码营可视化数据与条形图。它导致了以下错误ReferenceError: d3没有定义。当我使用vsCode工作良好，错误出现时，我使用代码笔。这是我的代码

javascript

let url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-              data.json'
let req = new XMLHttpRequest()
let data
let values =[]
let heightScale
let xScale
let xAxisScale
let yAxisScale
let xAxis
let yAxis
let width = 800
let height = 600
let padding = 40
let svg = d3.select('svg')
let generateScales = () => {
heightScale = d3.scaleLinear()
.domain([0, d3.max(values, (item) => {
return item[1]
})])
.range([0, height-(2 * padding)])
xScale = d3.scaleLinear()
.domain([0, values.length-1])
.range([padding, width-padding])
}
let drawCanvas = () => {
svg.attr('width', width)
svg.attr('height', height)
}
let drawBars = () => {
let tooltip = d3.select('body').append('div')   
.attr('id', 'tooltip')              
.style('visibility', 'hidden')
svg.selectAll('rect')
.data(values)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('height', (item) => {
return heightScale(item[1])
})
.attr('width', (width - (2*padding)) / values.length)
.attr('x', (item, index) => {
return xScale(index)
})
.attr('y', (item) => {
return (height-padding) - heightScale(item[1])
})
.attr('data-date', (item) => {
return item[0]
})
.attr('data-gdp', (item) => {
return item[1]
})
.on('mouseover', (item) => {        
tooltip.transition()
.style('visibility', 'visible')

document.querySelector('#tooltip').setAttribute('data-date', item[0])
document.querySelector('#tooltip').textContent = item[0]
})
.on('mouseout', (d) => {        
tooltip.transition()
.style('visibility', 'hidden')                  
})
}
let generateAxes = () => {
let dateArray = values.map((item) => {
return new Date(item[0])
})
xAxisScale = d3.scaleTime()
.domain([d3.min(dateArray), d3.max(dateArray)])
.range([padding, width-padding])
yAxisScale = d3.scaleLinear()
.domain([0, d3.max(values, (item) => {
return item[1]
})])
.range([height-(2 * padding), 0])
xAxis = d3.axisBottom(xAxisScale)
yAxis = d3.axisLeft(yAxisScale)
svg.append('g')
.call(xAxis)
.attr('id', 'x-axis')
.attr('transform', 'translate(0, '+ (height - padding) + ')')
svg.append('g')
.call(yAxis)
.attr('id', 'y-axis')
.attr('transform', 'translate(' + padding + ', ' + padding + ')')
}

req.open('GET', url, true)
req.onload = () => {
data = JSON.parse(req.responseText)
values = data['data']
console.log(values)
generateScales()
drawCanvas()
drawBars()
generateAxes()
}
req.send()

完整的代码可以在这里找到https://codepen.io/1-creator/pen/abWqpWp

what I try

添加脚本标签

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Answer 1

您的示例与最新版本(V7)完美配合。):

let url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json'
let req = new XMLHttpRequest()
let data
let values =[]
let heightScale
let xScale
let xAxisScale
let yAxisScale
let xAxis
let yAxis
let width = 1000
let height = 200
let padding = 40
let svg = d3.select('svg')
let generateScales = () => {
heightScale = d3.scaleLinear()
.domain([0, d3.max(values, (item) => {
return item[1]
})])
.range([0, height-(2 * padding)])
xScale = d3.scaleLinear()
.domain([0, values.length-1])
.range([padding, width-padding])
}
let drawCanvas = () => {
svg.attr('width', width)
svg.attr('height', height)
}
let drawBars = () => {
let tooltip = d3.select('body').append('div')   
.attr('id', 'tooltip')              
.style('visibility', 'hidden')
svg.selectAll('rect')
.data(values)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('height', (item) => {
return heightScale(item[1])
})
.attr('width', (width - (2*padding)) / values.length)
.attr('x', (item, index) => {
return xScale(index)
})
.attr('y', (item) => {
return (height-padding) - heightScale(item[1])
})
.attr('data-date', (item) => {
return item[0]
})
.attr('data-gdp', (item) => {
return item[1]
})
.on('mouseover', (item) => {        
tooltip.transition()
.style('visibility', 'visible')

document.querySelector('#tooltip').setAttribute('data-date', item[0])
document.querySelector('#tooltip').textContent = item[0]
})
.on('mouseout', (d) => {        
tooltip.transition()
.style('visibility', 'hidden')                  
})
}
let generateAxes = () => {
let dateArray = values.map((item) => {
return new Date(item[0])
})
xAxisScale = d3.scaleTime()
.domain([d3.min(dateArray), d3.max(dateArray)])
.range([padding, width-padding])
yAxisScale = d3.scaleLinear()
.domain([0, d3.max(values, (item) => {
return item[1]
})])
.range([height-(2 * padding), 0])
xAxis = d3.axisBottom(xAxisScale)
yAxis = d3.axisLeft(yAxisScale)
svg.append('g')
.call(xAxis)
.attr('id', 'x-axis')
.attr('transform', 'translate(0, '+ (height - padding) + ')')
svg.append('g')
.call(yAxis)
.attr('id', 'y-axis')
.attr('transform', 'translate(' + padding + ', ' + padding + ')')
}

req.open('GET', url, true)
req.onload = () => {
data = JSON.parse(req.responseText)
values = data['data']
console.log(values)
generateScales()
drawCanvas()
drawBars()
generateAxes()
}
req.send()

*{
font-family: 'Source Sans Pro', sans-serif;
}
html{
height: 100%
}
body {
background-color: #3AAFA9;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
svg{
background-color: #DEF2F1;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
border-radius: 5px;
padding: 10px;
}
.bar{
background-color: #2B7A78;
border-color: #2B7A78;
fill: #2B7A78;
}
.bar:hover{
fill: #17252A
}
g{
color: #17252A
}
#tooltip{
margin-top: 10px;
color: #FEFFFF;
font-size: 28px;
}
#title{
font-size: 30px;
fill: #17252A;
}

<script src="http://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<svg id='canvas'>
<text id='title' y='30' x='300'>United States GDP</text>
</svg>