D3.js中d3.select()选中div后无法添加类导致柱状图无法渲染问题求助

嘿，刚入门D3遇到这种问题太正常啦！我帮你拆解下问题根源：

核心问题：脚本执行时机不对 #

你把<script src="app.js">放在了<head>标签里，这时候浏览器还没解析到<body>中的<div>元素呢！D3的d3.select("div")根本找不到目标元素，后续给它加类、生成柱状图的操作自然都无效了——D3遇到空选择集时不会报错，但也不会做任何实际操作，这就是控制台没报错但DOM没变化的原因。

另外还有个小语法坑：你写的.style("height", ((data) => data.value * 10) + "px")会把整个箭头函数转换成字符串，导致height变成类似"() => data.value * 10px"的无效值，这也会让柱状图渲染失败。

解决方案 #

给你两种简单的修复方式，任选其一就行：

方法1：把脚本移到<body>末尾

让浏览器先加载完所有DOM元素再执行JS代码，这是最直观的做法：

<!DOCTYPE html>
<html lang="en">
<head>
<title>D3 JS</title>
<style>
.container{ 
  width: 300px; 
  height: 260px; 
  display: flex; 
  align-items: flex-end; 
  gap: 5px;
  border: 2px solid red;
}
.bar{ 
  background-color: aquamarine; 
  width: 30px;
}
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div></div>
<!-- 脚本移到这里，确保DOM已加载完成 -->
<script src="app.js"></script>
</body>
</html>

方法2：在JS中监听DOM加载完成事件

如果不想调整脚本位置，可以把所有D3代码包裹在DOMContentLoaded回调里，确保代码只在DOM完全加载后执行：

document.addEventListener('DOMContentLoaded', function() {
  const DUMMY_DATA = [
   { id: "d1", value: 10, region: "India" },
   { id: "d2", value: 15, region: "Germany" },
   { id: "d3", value: 12, region: "UK" },
   { id: "d4", value: 8, region: "Netherlands" },
   { id: "d5", value: 19, region: "Norway" },
  ];
  const container = d3
   .select("div")
   .classed("container", true)
   .style("border", "2px solid red")
   .style("display", "flex")
   .style("align-items", "flex-end")
   .style("gap", "5px")
   .style("height", "260px")
   .style("width", "300px");

  const bars = container
   .selectAll(".bar")
   .data(DUMMY_DATA)
   .enter()
   .append("div")
   .classed("bar", true)
   .style("width", "30px")
   .style("height", (data) => `${data.value * 10}px`)
   .style("background-color", "aquamarine");
});

额外优化小建议 #

我调整了下样式，给.container加上了flex布局和align-items: flex-end，这样柱状图会从底部开始排列，更符合常规的柱状图样式～

内容的提问来源于stack exchange，提问作者Sha