I'm currently working on a project where I want a hidden div, named myDiv, to be displayed above the clicked bar whenever a square bar is clicked.
Here's what I've attempted so far: 1) I have written a Javascript function called showDiv()
function showDiv() {
document.getElementById('myDiv').style.display = "block";
}
2) I've included HTML code for myDiv
<div id="myDiv" style="display: none;">
<p>Detail</p>
</div>
3) I've implemented CSS for a bar chart
div.bar {
display: inline-block;
width: 20px;
height: 75px;
margin-right: 2px;
4) I've written Javascript (D3) code to handle the onClick event on a bar
var dataset = [5, 10, 13, 7, 21, 24, 15, 16];
var bar = d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
})
.style("width", function(d) {
var barWidth = d * 5;
return barWidth + "px";
})
.on("click", showDiv);
While I have successfully displayed myDiv on click event of a bar, I'm struggling to position it above the selected bar. Any guidance would be much appreciated! Thank you :)