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

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

1 个答案: