D3.js rect 在图表上没有显示

Question

我在 FreeCodeCamp 上发起了 D3.js 挑战，问题是我用图表解决了它，但它只给我一个直肠显示，只有一个具有我放置的宽度和高度，我将在下面显示代码。

完整代码在

<script>

    //set d3
    var w = 1000, h  = 500;
    var padding = 50;
    var svg = d3.select('body')
                .append('svg')
                .attr('width', w)
                .attr('height', h)
    
    //title
    svg.append('text')
        .attr('x', w / 2)
        .attr('y', 50)
        .text('United States GDP')


    fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
    .then((result)=>result.json())
    .then((data)=>{

        var the_data = data['data']

        //get vals
        var get_max = d3.max(data['data'])
        var get_mix = d3.min(data['data'])

        //for x
        var max_x = Number(get_max[0].split('-')[0])
        var min_x = Number(get_mix[0].split('-')[0])

        //for y
        var max_y = get_max[1]
        var min_y = get_mix[1]


        var xScale = d3.scaleLinear()
                        .domain([min_x, max_x])
                        .range([padding, w-padding])

        var yScale = d3.scaleLinear()
                        .domain([min_y, max_y])
                        .range([h-padding, padding])


        //the_chars
        for(var i in the_data){
            var get_year = Number(the_data[i][0].split('-')[0])
            the_data[i][0] = get_year
        }

        svg.selectAll('rect')
            .data(the_data)
            .enter()
            .append('rect')
            .attr("x", (d) => { xScale(d[0]) })
            .attr('y', (d)=>{ yScale(d[1]) })
            .attr("width", 200)
            .attr("height", 20)

        //axis
        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScale);

        //display axis
        svg.append("g")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);

        svg.append('g')
        .attr('transform', 'translate(' + padding + ', 0)')
        .call(yAxis)




    })

现在，我需要做什么来显示图表！

我提到脚本标签嵌入在正文中

Answer 1

问题：箭头功能没有 return 值。 解决方案：改为使用显式或隐式 return。

.attr("x", (d) => { xScale(d[0]) }) // returns undefined
.attr("x", (d) => xScale(d[0])) // implicit return
.attr("x", (d) => { return xScale(d[0]) }) // explicit return

问题: 固定高度值。 解决方案改为根据GDP值（d[1]）评估每个人的身高。

.attr('height', 20) // fixed height
.attr('height', d => yScale(min_y) - yScale(d[1]))
// subtract from min range to account for padding and inverted y coordinates in SVG

this codepen

中的完整解决方案

D3.js rect 在图表上没有显示

D3.js rect no display on chart

javascript

ajax

charts

d3.js