学习D3绘制柱状图无输出，寻求技术解决方法

AI 小北

2026-5-21

解决D3 v4柱状图无输出的问题

嘿，我看到你在用D3 v4创建柱状图时遇到了没有输出的问题，我之前也踩过类似的坑，咱们来一步步解决它：

问题排查与修复点

1. D3 v4不再支持批量属性的对象写法

你代码里用了.attr({ ... })这种批量设置属性的方式，但D3 v4及更高版本已经移除了这个语法，得改成逐个调用.attr()方法，或者如果想保留批量写法，需要额外引入d3-selection-multi模块（不过更推荐前者，避免额外依赖）。

2. 脚本加载顺序错误

你的D3库引入脚本放在了代码后面，这会导致浏览器先执行你的D3代码，此时D3还没加载完成，d3对象不存在，代码直接报错终止，自然看不到柱状图。必须把D3的<script>标签放在自定义代码的前面。

修正后的完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script>
var w = 300; 
var h = 100; 
var padding = 2; 
var dataset = [5, 10, 20, 12, 19]; 

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) { 
        return i * w / dataset.length; 
    })
    .attr("y", function(d) { 
        return h - d; 
    })
    .attr("width", function(d) { 
        return (w / dataset.length) - padding; 
    })
    .attr("height", function(d) { 
        return d; 
    });
</script>