javascript - 添加 onClick 事件以在 D3.js 中的每个栏上方显示一个隐藏的 div(也许我还缺少重要的 css 代码？)

Question

所以我想做的是有一个隐藏的 div，称为 myDiv，当每个方形条被点击时显示在被点击的条上方。

到目前为止我试过的是 1) showDiv() 的 Javascript 代码

 function showDiv() {
     document.getElementById('myDiv').style.display = "block";
 }

2) myDiv 的 HTML 代码

<div id= "myDiv" style="display: none;">
     <p>Detail</p>
</div>

3) 条形图的 CSS

div.bar {
    display:inline-block;
    width: 20px;
    height: 75px;   /* Gets overriden by D3-assigned height below */
    margin-right: 2px;

4) 栏上的 onClick 事件的 Javascript (D3) 代码

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);

我已经在栏的单击事件中显示了这些内容。 但我不确定如何让 myDiv 出现在选定栏的上方。

求助!谢谢:)

Answer 1

如果你还没有，你应该看看jQuery .它是一个 Javascript 库，使 dom 操作和遍历变得更加容易。

我看到您的 showDiv 函数正在运行，但现在需要让它只显示被单击元素上方的 myDiv。如果没有完整的 html 标记，就很难理解您的意思。但是，查看用于 dom 遍历的 jQuery API 可能会有所帮助。例如，.closest可能会有帮助。