0

So what I'm trying to do is to have a hidden div, called myDiv, to show up above the clicked bar when each squared bar is clicked.

What I've tried so far is 1) Javascript code for showDiv()

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

2) HTML code for myDiv

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

3) CSS for a bar chart

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

4) Javascript (D3) code for 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);

With what I already have show up at an on click event of a bar. But I'm not sure how I can make myDiv to appear above a selected bar.

Please help! Thanks :)

4

2 回答 2

1

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

我看到你有 showDiv 功能工作，但现在需要让它只显示点击项目上方的 myDiv 。如果没有完整的 html 标记，很难理解您的意思。但是，查看用于 dom 遍历的 jQuery API 可能会有所帮助。例如，.closest可能会有所帮助。

于 2013-06-11T21:57:18.263 回答
0

在您的showDiv()函数中，您的元素 ID 有一个小写的“m”。实际元素有一个大写的“M”。这将导致它不起作用。除非那是一个错字？

如果这不能回答这两个问题，对不起，但这是我能提供的最大帮助。我对D3一无所知。

于 2013-06-11T20:53:27.100 回答