ズーム可能な円グラフでツールチップを表示する方法

Question

ズーム可能サークルパッキングでツールチップを表示しようとしました。私はonMouseoverを表示する必要があり、私はアラートを取得することができますが、ツールチップ形式ではありません。

は、誰かがこれを取得するために私を助けることができます。..

感謝を。

Answer 1

下記をご覧ください。これがあなたを助けることを願っています高Zインデックスを使用して、デフォルトでは非表示、ページ上の「上」のすべての要素を配置されているだけのdiv（ある

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
.domain([0, d3.max(data)]) 
.range([0, 420]); 

var tooltip = d3.select("body") 
.append("div") 
.style("position", "absolute") 
.style("z-index", "10") 
.style("visibility", "hidden") 
.style("background", "#000") 
.text("a simple tooltip"); 

d3.select("body") 
.selectAll("div") 
.data(data) 
.enter().append("div") 
.style("width", function(d) { return x(d) + "px"; }) 
.text(function(d) { return d; }) 
.on("mouseover", function(d){tooltip.text(d); return 
tooltip.style("visibility", "visible");}) 
    .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY- 
10)+"px").style("left",(d3.event.pageX+10)+"px");}) 
    .on("mouseout", function(){return tooltip.style("visibility", 
"hidden");}); 

するvarツールチップ=私達は私達のツールチップ自体を作成しているところのブロックがあり、値）。

これを作成したら、適切なイベントとそのイベントが発生したときに起動する関数を受け入れる多数の.onメソッド呼び出しを使用して、d3.jsのバーコード作成コードに追加しました。最も重要なのは、tooltip.text（d）を指定する最初のmouseoverイベント関数です。これは、ツールヒントのテキストが渡されたdのデータ値に設定されていることを意味します。

ここで、渡されたデータでカスタマイズ可能なdivツールチップが表示されます。