d3.js PopUpウィンドウ（マウスオーバーとマウスオーバー）

Question

d3.jsを使用してジオマップにポップアップ機能を作成しました。次のコードの部分は、マウスを円の上に移動すると特定のノードを円として表示し、ポップアップウィンドウが表示されます。

g2.selectAll(".details") 
.data(d3.entries(json1)) 
.enter() 
.append("circle") 
.attr("r",0.5) 
.attr("transform",function(d) { return "translate("+ projection([ 
    d.value.lon, 
    d.value.lat 
]) + ')'; }) 
.attr("fill","white") 
.attr("stroke","steelblue") 
.on("mouseover", function(d) { 
    div.transition() 
     .duration(500) 
     .style("opacity", .9); 
    div .html(
     '<a href= "' + d.value.url + '">' + //with a link 
      d.value.name +"</a>" + "<br/>" + d.value.status) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY - 30) + "px"); 
}) 

あなたが見ることができるように、マウスオーバー機能が働いています。しかし、私はにズームインまたはマップをドラッグすると、それはこのようないくつかのバグが存在します：

をあなたはポップアップウィンドウは常に私は理由は場所が特定されていることであると考えている（同じ位置に位置し見ることができます地図をドラッグすると動的に変化しません）。

円（ノード）の外側にマウスを置くと、ポップアップウィンドウを削除するために、mouseoutの機能をどのように作成すればいいですか？

mouseover機能でバグを修正する方法はありますか？

ありがとうございました。

.on("mouseout", function() { 
    div.transition() 
     .duration(500) 
     .style("opacity", 0) 
     .on('end', function() { 
      div.html(''); 
     }); 
}); 

あなたはズームやドラッグしているときに正しい位置に表示されたポップアップを保つために、それが処理するための最善の方法を知ることは困難だとして：あなたは自分のチェーンにこれを追加することができますmouseoutを処理するために

Answer 1

これはあなたのコードを見ることなく、自動的に更新されるようにズーム/ドラッグされた選択範囲内にポップアップdivを置くことができますか？ドラッグ＆ズームでポップアップの位置を変更する必要があります。mouseover関数でマーカーの位置を保存し、必要に応じてズームとドラッグの座標を再計算する必要があります。