D3.jsのSVG要素をクリックして情報テンプレートを追加および削除するにはどうすればよいですか？

Question

私は、ツールヒントやポップアップの行に沿って何かを考えていますが、そこにはもっと多くの情報があります。また、すべての情報ボックスをページ上の同じ場所に配置したいと考えています。全体として、私はちょうどSVG（いくつかのデータ要素を表す）をクリックしようとしていて、その前にポップアップするクリックイベント、トリガー、および情報ボックスにあります。それがSVGをカバーするならば、それはそれ自身のクローズ機能であるかもしれません。これまで何度もこのことを見てきたことは分かっていますが、現時点では正確な名前が私を逃しています。

今、私が円を持っている：

node.append("circle") 
     .attr("cx", sankey.nodeWidth()/2) 
     .attr("cy", function(d){return d.dy/2;}) 
     .attr("r",function(d){return Math.sqrt(d.dy);}) 
     .style("fill", function(d){return d.color = color(d.name.replace(/ .*/,""));}) 
     .style("stroke", function(d){return d3.rgb(d.color).darker(1);}) 
     .style("stroke-width",5) 
     .on("mouseover", tip.show) 
     .on("mouseout", tip.hide) 
     .on("click", changeColor(function(d){return d.color;})) 
     .append("title") 

私のような何か書くこと望んでいる：

.on("click",function(d){/*Create a rect element*/}) 
    .append("text", "This element represents the "+d.name+" element and will weigh approximately "+d.weight+"lbs.") 
    .attr("cx", 50) 
    .attr("cy", 50) 
    .on("click_exit?" function(d){this.remove();}) 

を私はこれにアプローチするかどうかは定かではないが、私はただのテキストが欲しいですボタンをクリックして表示し、終了ボタン（またはいくつかの終了方法）を閉じて閉じます。私は前のコードに上記のコードのようなものを追加することができますか、それとも完全に分離した新しいsvg要素全体を作成する必要がありますか？

Answer 1

これまでと同様のことをやったことがあります。私は、SVGが実際のd3グラフィックスを実行していないときに本当に苦しいことがあることを発見しました。私はこの場合htmlで作業します。

私がしたのは、希望するテンプレートを使ってhtml要素を作成し、絶対に配置したい場所に配置してから、display:noneまたはopacity:0に設定しました。あなたのonClick関数のその後

.on("click",function(d){ 
    d3.select('.my-info-box p') 
     .append(d) 
     .style('display','block') 
}) 

これは裸の骨の機能です。ここでの持ち帰りは、svgではなくhtmlを使用することです。これを閉じるには、ボックスの右上/左に×を配置してから、オンクリックして情報ボックスを閉じます。