I'm trying to make a bar chart but I can't figure out a way to make the bar start from the 0 point of y axis and not from the very bottom of the svg. How can I fix that?

 let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";

const padding = 50;
const height = 460;
const width = 900;

 var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

var arr = [];
    d3.json(url, function(data) {
        for (let i = 0; i < data.data.length; i  ) arr[i] = data.data[i]; 

    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(arr, (d) => d[1])])
                     .range([height - padding, padding]);

    const yAxis = d3.axisLeft(yScale);

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

    svg.selectAll('rect')
        .data(arr)
        .enter()
        .append('rect')
        .attr('fill', 'blue')
        .attr('height', d => d[1]   padding)
        .attr('width', 2.909090909090909)
        .attr('x', (d, i) => padding   (3.2 * i))
        .attr('y', d => yScale(d[1]))
        .append('title')
        .text(d => d[1])

    });

    <script src="https://d3js.org/d3.v4.min.js"></script>

CodePudding user response：

You are incorrectly calculating the height of the rectangle, and not using your scale. It's also trickier since your use of padding is not the typical D3 convention.

    svg.selectAll('rect')
        .data(arr)
        .enter()
        .append('rect')
        .attr('fill', 'blue')
        .attr('height', d => height - padding - yScale(d[1]))