Tell us what’s happening:
Hello, can someone help me to solve this, I don’t know what am I doing wrong. Thank you
Your code so far
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
.style("height", (div)=>{
div=dataset;
})
// Add your code above this line
</script>
</body>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Data Visualization with D3 - Update the Height of an Element Dynamically
ILM
2
remember that the callback need to return the value
Hi there!
You have an example:
.style("cssProperty", (d) => d)
Your code didn’t matches with the example.
lasjorg
4
Log out the callback parameter to better understand what it is.
.append()
adds 9 divs because the dataset
array has 9 elements.
The callback to .style()
is passed the array elements. That is how you can add the values from the array as CSS values.
Here is another example you can look at.
<style>
.light {
width: 50px;
height: 50px;
}
</style>
<body>
<script>
const dataset = ["red", "yellow", "green"];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "light")
.style("background-color", (data) => {
console.log(data);
return data;
})
</script>
</body>
system
Closed
5
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.