ReferenceError: d3没有定义为免费代码营

Question

目前，我正在使用条形Chart.Its进行第一次免费代码营可视化数据，并使用以下错误ReferenceError: d3不是defined.When --我使用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

我试过的

添加脚本标记

 <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>

​