javascript - 如何在 d3 js 树中任何节点的鼠标悬停事件上显示带有数据的矩形 div？

Question

我使用 d3 js 创建了一棵树。现在我将鼠标悬停在任何节点上，应显示一个包含节点名称和 ID 的矩形框。这个我试过了

但这不适用于鼠标悬停在任何节点上。如何做到这一点？

Answer 1

您不能将 HTML 元素(div、p、h1、h2 等)附加到 SVG。该标记甚至可以在您检查 DOM 时显示，但它根本不起作用。

这是你可以做的:

首先，使用类名为“tooltip”的 div 设置工具提示的 CSS 样式:

div.tooltip {   
    position: absolute;         
    text-align: /*whatever*/;           
    white-space: /*whatever*/;                  
    padding: /*whatever*/;              
    font-size: /*whatever*/;        
    background: /*whatever*/;   
    border: /*whatever*/;   
    border-radius: /*whatever*/;            
    pointer-events: /*whatever*/;
    etc...          
}

然后设置工具提示 var(这里，#svgId 是您附加 svg 的元素的 ID，与选择“body”没有太大区别):

var tooltip = d3.select("#svgId").append("div") 
            .attr("class", "tooltip")               
            .style("opacity", 0);

div 的不透明度为 0。然后只需在鼠标悬停或鼠标移动时显示工具提示即可:

nodeEnter.on("mousemove", function(d) {
            tooltip.html("<strong> Look, I'm bold !</strong> and now I'm 
                    not bold <br> and this is another line! and this
                    is my data:" + d.whatever)
                    .style('top', d3.event.pageY - 12 + 'px')
                    .style('left', d3.event.pageX + 25 + 'px')
                    .style("opacity", 1);
        });

nodeEnter.on("mouseout", function(d) {
            tooltip.style("opacity", 0);
        });

PS:这是您可以附加的 SVG 元素列表(无需使用 foreignObject):http://www.w3schools.com/svg/svg_reference.asp