如何在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不透明度.然后,只需要在mouseover或mousemove上显示工具提示:

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