Bar Chart not properly displayed with d3.js-CodePudding

I am new to d3 and javascript and trying to create a simple bar chart. My CSV file has only two columns (number of visits and places). I have tried to use the following code but the bar chart doesn't display correctly. The only thing showing is the y-axis labeled correctly and the x-axis with no labels. I would appreciate it if someone could take a look and point out what is wrong. And I am using d3 version 6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./script/d3.min.js"></script>
    <div id="bar_chart"></div>
    <title>A1</title>
</head>
<body>

<script>

let margin = {top: 50, right: 50, bottom: 90, left: 70},
    width = 760 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

let svg = d3.select("#bar_chart")
    .append("svg")
        .attr("width", width   margin.left   margin.right)
        .attr("height", height  margin.top  margin.bottom)
    .append("g")
        .attr("transform",
            "translate("   margin.left   ","   margin.top ")");

let data = d3.csv("./data.csv", function (d) {
        d.Visitors =  d["Visitors"];
})

let x = d3.scaleBand()
    .range([0, width])
    .domain(d3.range(data.length))
    .padding(0,2);

svg.append("g")
    .attr("transform", "translate(0,"   height  ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
        .attr("transform", "translate(-10, 0)rotate(-45)")
        .style("text-anchor", "end");

let y = d3.scaleLinear()
    .domain([0, 4000000])
    .range([height, 0]);

svg.append("g")
    .call(d3.axisLeft(y));

svg.selectAll("barchart")
    .data(data)
    .enter()
    .append("rect")
        .attr("x", function (d) { return x(d.Place); })
        .attr("y", function(d) { return y (d.Visitors); })
        .attr("width", x.bandwidth())
        .attr("height", function (d) { return height - y(d.Visitors); })
        .attr("fill", "darkgreen")

</script>
</body>
</html>

CodePudding user response：

After callback you can use the data

d3.csv("./data.csv", function (d) {
        d.Visitors =  d["Visitors"];


let x = d3.scaleBand()
    .range([0, width])
    .domain(d3.range(data.length))
    .padding(0,2);

svg.append("g")
    .attr("transform", "translate(0,"   height  ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
        .attr("transform", "translate(-10, 0)rotate(-45)")
        .style("text-anchor", "end");

let y = d3.scaleLinear()
    .domain([0, 4000000])
    .range([height, 0]);

svg.append("g")
    .call(d3.axisLeft(y));

svg.selectAll("barchart")
    .data(d)
    .enter()
    .append("rect")
        .attr("x", function (d) { return x(d.Place); })
        .attr("y", function(d) { return y (d.Visitors); })
        .attr("width", x.bandwidth())
        .attr("height", function (d) { return height - y(d.Visitors); })
        .attr("fill", "darkgreen")
})

Visit https://www.tutorialsteacher.com/d3js/loading-data-from-file-in-d3js#d3.csv