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.
Your height problem is your parenthesis. But you still don't have a proper chart otherwise:
.style("height", (data) => data.value * 10 + "px")