D3のマウスクリック時に要素を表示/非表示

Question

ノードをクリックしたときにボックスを表示させようとしていますが、ノードをクリックすると消えます。今すぐ行くから出てきて、クリックすると消えません。ここにいるJSFiddle

私は編集がここのどこかにあると仮定しようとしましたが、私は私の人生のためにそれを理解できません。他の関連する質問もチェックしましたが、具体的な問題は異なります。

var node = svg.selectAll(".node") 
    .data(data.nodes) 
.enter().append("g") 
    .attr("class", "node") 
    .on("mouseover", mouseover) 
.on("mouseout", mouseout) 
.on("click", function(d) { 
    text = "Generic Text Here: " + d.name; 
     d3.selectAll(".infobox") 
    //.append("rect") 
    //.attr("x", 70) 
    //.attr("y", 5) 
    //.attr("height", 100) 
    //.attr("width", 200) 
    //.select("text") 
    .select("a") 
    .attr("xlink:href", text) 
    .selectAll("text").text(text)}) 
    .call(force.drag); 

は

Answer 1

は別に、私はあなたにも一つのノードがクリックされたシナリオとボックスを処理する必要があると思い表示/非表示から別のノードをクリックして今示され、ボックスは、そのノードのデータを表示する必要がある

if(this.getAttribute("ind") == prev && document.getElementById("plot").style.display == 'block'){ 
     document.getElementById("plot").style.display = 'none'; 
    }else{ 
    document.getElementById("plot").style.display = 'block';} 
    prev = i; 

このフィドルhttp://jsfiddle.net/nw7g157c/9/

Answer 2

この質問に似ているようだあなたはあなたに感謝ありがとう：javascript hide/show element

あなたは同じもののいくつかは、あなたのアプリを知っているanyways-行うことができますjQueryの（d3.jsを使用しない場合最高）：

///Show. Put in your "mouseout" callback 
document.getElementById(id).style.display = 'block'; 
//Hide. Put in your callback in .on("click", .... 
document.getElementById(id).style.display = 'none'; 

"id"はあなたのボックスに対応しています。 希望に役立ちます！

EDIT： http://jsfiddle.net/nw7g157c/19/

が、私は周りのハッキングのビットをしなければならなかったが、私はこれを追加するには、上記の提案を使用：

document.documentElement.onclick = function(e) { 
    let evt = e || window.event, // IE... 
     target = evt.target || evt.srcElement // IE again... 

    if (target.nodeName !== 'circle') { //show the plot box if not a circle: 
     document.getElementById('plot').style.display = 'block'; 
    } 
} 

とこれはあなたの上に（「クリック」..それは私の子供を養うますよう。）

document.getElementById('plot').style.display = 'none'; 

は投票をアップしてください