D3.js加提示框

使用D3.js对元素加入提示框：

title框

var path = svg.datum(root).selectAll("path")
            .data(partition.nodes)
            .enter().append("path")
            .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
            .attr("d", arc)
            .style("stroke", "#fff")
            .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
            .style("fill-rule", "evenodd")
            .append("title")//此处加入title标签
            .text(function(d){return d.name}//title标签的文字

自定义框

JS:加入提示框的div，并将其opacity设为0，这样提示框就会看不到。

var tooltip=d3.select("body")
    .append("div")
    .attr("class","tooltip")
    .style("opacity",0.0);

CSS：toolafter为提示框左上角的小箭头，可不加

.tooltip{
    position:absolute;
    padding:5px;
    width:120;
    height:auto;
    font-family:simsun;
    font-size:14px;
    color:black;
    background-color: rgb(255,255,255);
    border-width: 2px solid rgb(255,255,255);
    border-radius:5px;
}

.tooltip:after{
    content: '';
    position:absolute;
    bottom:100%;
    left:20%;
    margin-left: -8px;
    width:0;
    height:0;
    border-bottom:12px solid rgb(255,255,255);
    border-right:12px solid transparent;
    border-left:12px solid transparent;
}

使用：在对元素应用提示框时，需要将其定位到鼠标附近，并且将其opacity设为1以显示提示框。鼠标移开时，将其opacity设为0.

gridrect.on("mouseover",function (d) {
       var t=parseInt(threshold(d[2]).substring(1,2));
       if(t>0) {
           tooltip
               .html(" x: " +d[0]+"<br/>"+" y: "+d[1]+"<br/>"+" 端口号： "+(256 * d[1] + d[0])+"<br/>"+" 连接次数： "+d[2])
               .style("left",(d3.event.pageX) +"px")
               .style("top",(d3.event.pageY +20)+"px")
               .style("opacity",1.0)
       }
   })
       .on("mouseout",function (d) {
           tooltip.style("opacity",0.0);
       });

`