D3.Select（）不选择DIV
我是D3 JS的新手，我是第一次尝试用D3绘制图形。我有以下HTML和JS。
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3 JS</title>
<style>
.container{
width: 300px;
height: 260px;
}
.bar{
background-color: aquamarine;
display: flex;
justify-content: space-around;
}
</style>
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="app.js"> </script>
</head>
<body>
<div></div>
</body>
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");
const bars = container
.selectAll(".bar")
.data(DUMMY_DATA)
.enter()
.append("div")
.classed("bar", true)
.style("width", "30px")
.style("height", ((data) => data.value * 10) + "px");
我正在尝试绘制简单的条形图，并且控制台没有错误。但是，我要添加到DIV的课程并没有在DOM中附加，因此剩下的款项并没有被绘制。谁能告诉我这里有什么问题。
I am a newbie with d3 JS and i was into my first try to draw a graph with d3. I have the following HTML and JS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3 JS</title>
<style>
.container{
width: 300px;
height: 260px;
}
.bar{
background-color: aquamarine;
display: flex;
justify-content: space-around;
}
</style>
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="app.js"> </script>
</head>
<body>
<div></div>
</body>
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");
const bars = container
.selectAll(".bar")
.data(DUMMY_DATA)
.enter()
.append("div")
.classed("bar", true)
.style("width", "30px")
.style("height", ((data) => data.value * 10) + "px");
I am trying to draw simple bar chart and i have no error in the console. but the class i am trying to add to the div is not appending in the DOM and hence the remaining this are not getting plotted. can anyone tell me what is wrong here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的身高问题是您的括号。但是，否则您仍然没有适当的图表：
Your height problem is your parenthesis. But you still don't have a proper chart otherwise: