d3.js v6柱状图显示异常：仅显示Y轴，无X轴标签及柱状图

你的代码存在几个关键问题，导致柱状图无法正常渲染，结合D3.js v6特性逐一修复如下：

1. 异步数据加载处理错误 #

D3.js v6中d3.csv()返回的是Promise对象，而非直接的数据集。原代码直接将Promise赋值给data，此时data.length为undefined，导致X轴比例尺无法正确生成。必须通过.then()方法处理异步加载完成后的逻辑。

2. X轴比例尺配置错误 #

• 你用d3.range(data.length)生成数字序列作为X轴定义域，但实际应使用CSV中的「地点」（Place）字段作为刻度标签。
• scaleBand的padding参数格式错误，应为单个数值（如0.2），而非数组(0,2)。

3. 数据转换函数缺少返回值 #

行转换函数中修改了d.Visitors的数值类型，但未返回处理后的对象，导致数据未被正确转换，需添加return d;。

4. DOM元素位置错误 #

<div id="bar_chart">被放在<head>标签内，不符合HTML规范，应移至<body>中。

5. 选择器与数据绑定错误 #

selectAll("barchart")是选择不存在的标签，应使用类选择器（如.bar）；同时所有依赖数据的逻辑必须放在数据加载完成后的回调中。

修复后的完整代码 #

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

<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})`);

// 异步加载CSV数据，处理逻辑放在then回调内
d3.csv("./data.csv", function (d) {
    d.Visitors = +d["Visitors"]; // 转换为数值类型
    return d; // 返回处理后的对象
}).then(function(data) {
    // 定义X轴比例尺：使用地点字段作为定义域
    let x = d3.scaleBand()
        .range([0, width])
        .domain(data.map(d => d.Place))
        .padding(0.2); // 修正padding参数

    // 添加X轴及标签旋转样式
    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");

    // Y轴比例尺
    let y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.Visitors)]) // 动态适配数据最大值
        .range([height, 0]);

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

    // 添加柱状图矩形
    svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
            .attr("class", "bar")
            .attr("x", d => x(d.Place))
            .attr("y", d => y(d.Visitors))
            .attr("width", x.bandwidth())
            .attr("height", d => height - y(d.Visitors))
            .attr("fill", "darkgreen");
});
</script>
</body>
</html>

额外提示 #

• 确保CSV文件的列名与代码中使用的Place、Visitors完全一致（注意大小写），例如CSV第一行应为Place,Visitors。
• 代码中Y轴已改为动态适配数据最大值，无需手动设置固定值，更灵活通用。

内容的提问来源于stack exchange，提问作者Mr.Muu