SVGをクリックしてモーダルを開く方法javascript d3

Question

私は、javascriptとd3を使用して、データ視覚化プロジエクトに取り組んでいます。このプロジェクトでは、さまざまなチャートを使用してデータを表示しています（データは外部ソースからのものです）。私はこの言語では新しいので、インターネットのさまざまな部分のコードを使用しています。多くの作業は、これらの部分を編集してお互いに互換性があるようにしています。

私は、チャートをすばやく展開しています（私はJavaScriptとHTMLを1週間前に開始して以来、大きな成果です）。今、私はチャートのバーをクリックするか、少なくともラベル上でモーダルを開くことができたいと思っていますが、それにはいくつか問題があります。

これはチャート上のバーが定義されている方法です。

var vakken = svg.selectAll(".question") 
    .data(data) 
.enter().append("g") 
    .attr("class", "bar") 
    .attr("transform", function(d) { return "translate(0," + y(d.Question) + ")"; }); 

var bars = vakken.selectAll("rect") 
    .data(function(d) { return d.boxes; }) 
.enter().append("g").attr("class", "subbar"); 

bars.append("rect") 
    .attr("height", 16) 
    .attr("x", function(d) { return (x(d.x0)); }) 
    .attr("width", function(d) { return (x(d.x1) - x(d.x0)); }) 
    .style("fill", function(d) { return color(d.name); }); 

これが理解されるであろう達成する方法上の任意のコメント（そして私を欺くこと自由に感じ、私は種類のそれに値する）

Answer 1

チャートのバーを 'rect' dom要素（ 'bars.append（...）'の行）として定義します。それぞれのdom要素として、JavaScript経由でアクセスできます。バーにアクセスするには、例えば、IDやクラスを追加する必要があります。

bars.append("rect").attr("id", "bar01")... 

次に、あなたがそれにアクセスし、あなたのonclickイベントを追加します。

$("#bar01").click(function(e) { ... }); 

または純粋なJSで：

document.getElementById("bar01").onclick = function(e) { ... }; 

私はそれが助けてくれることを願っています...

編集：私はモーダルダイアログを開く方法をあなたの質問を忘れてしまった。モーダルダイアログを開くにはいくつかの方法があります。最も簡単な方法は、materializecssなどのようなライブラリを使用することです。しかし、あなたのプロジェクトには多くのものが適用されます。

jQueryはすぐに機能をシンプルに保つので、これは簡単な例です。

まず、div要素を画面の中央に配置する必要があります。このdiv要素は、デフォルトでは非表示になって：

// HTML 
<div id="modal01" class="modal">Blabla</div> 

// CSS 
.modal { 
    position: absolute; 
    left: ... 
    ... 
    display: none; 
    z-index: 10; 
} 

Zインデックスがあなたモーダルダイアログがあなたのページの前にあることを保証するために使用されます。このboxはまた、デフォルトでは非表示になって

// HTML 
<div id="box" class="modal-box"></div> 

// CSS 
.modal-box { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
    display: none 
} 

：他の要素をクリックを避けるために

、我々は画面全体を使用し、さらにdiv要素を使用しています。あなたがバーをクリックすると、あなたは例えば、両方のdivを示しています

$("#bar01").click(function (e) { 
    $("#modal01").show(); 
    $("#box").show(); 
}); 

あなたはボックスをクリックすると、モーダルは、（一例として）の間、閉鎖されます。

$("#box").click(function (e) { 
    $("#modal01").hide(); 
    $("#box").hide(); 
}); 

は、私が思うに、あなたはさらなるステップを見つける;）