0

だから私がしようとしているのは、myDiv と呼ばれる非表示の div を使用して、各四角いバーがクリックされたときにクリックされたバーの上に表示することです。

私がこれまでに試したことは、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 を表示する方法がわかりません。

助けてください！ありがとう ：）

4

2 に答える 2

1

まだ行っていない場合は、jQueryを調べる必要があります。これは、dom の操作とトラバーサルをより簡単にする Javascript ライブラリです。

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 に答える