向d3樹葉添加鼠標懸停彈出框

Question

我遇到了使用d3構建可摺疊動畫縮進樹 的這個很好的示例here。

如何在葉節點上發生mouseover事件時添加彈出窗口？ 彈出窗口應顯示在實際節點旁邊。

Answer 1

您可以通過添加。對事件的nodeEnter.append做幾乎你想在鼠標懸停及移出任何東西（「SVG：圈」）部分：

nodeEnter.append("svg:circle") 
    //.attr("class", "node") 
    //.attr("cx", function(d) { return source.x0; }) 
    //.attr("cy", function(d) { return source.y0; }) 
    .attr("r", 4.5) 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
    .on("mouseover", addLabel) 
    .on("mouseout", clearLabel) 
    .on("click", click); 

隨着這兩條線，你將有編寫addLabel和clearLabel函數（例如顯示或隱藏示例中的子節點的單擊函數）。

您可以通過將節點的位置傳遞給函數或通過相對於鼠標定位來讓節點出現。