Question

工具提示不会在适当的区域内显示。我正在使用D3.js

var divLink = d3.select(el[0]).append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

.attr("id",function(d){
    return d.linkID;})
    .style("stroke-width", 0.7)
    .style("fill", "none")
    .on("mouseover", function(d) {
        var dx = (d.x+30), dy = (d.y+155)-$('#svgWrapper').scrollTop();
        divLink.transition()        
        .duration(200)      
        .style("opacity", .9); 
        // When links are hovered, tool tip is created
        if(d.source.type.toLowerCase()=="rack" || d.target.type.toLowerCase()=="rack")
        {
            divLink.html("<b>Link Details: </b><br/><br/>"+"<b>Link Id: </b>"+d.linkID +"<br/>"
                    +"<b>Device1: </b>"+d.source.name+"<br/>"+ "<b>Device2: </b>"+d.target.name+"<br/>") 
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
        }else{
            divLink.html("<b>Link Details: </b><br/><br/>"+"<b>Link Id: </b>"+d.linkID +"<br/>"+"<b>Link Speed: </b>"+d.linkSpeed+"<br/>"
                    +"<b>Device1: </b>"+d.source.name+"<br/>"+ "<b>Ports at Device1: </b>"+d.sport+"<br/>"+"<b>Device2: </b>"+d.target.name+"<br/>"
                    + "<b>Ports at Device2: </b>"+d.tport+"<br/>") 
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
        }
    })                  
    .on("mouseout", function(d) { 
        divLink.transition()        
        .duration(500)      
        .style("opacity", 0);  

    });

有些东西在风格中，因为我得到了这个错误。实际上我还有一个工具提示用于另一个工具，工具提示放在确切的区域。

var div = d3.select(el[0]).append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);



// Device Node Creation
var node = svg.selectAll(".node")
.data(networkObject.nodes)
.enter()
.append("g")
.attr("id",function(d){return d.name;})
.attr("class","node")
.attr("transform", function(d) {
    return "translate(" + d.x + "," + (d.y) + ")"; })
    .on("mouseover", function(d) { 
        var dx = (d.x+30), dy = (d.y+155)-$('#svgWrapper').scrollTop();
        div.transition()        
        .duration(200)      
        .style("opacity", .9);   
        // Tool tip when hovered on particular device node
        if(d.type.toLowerCase()=="rack"){
            div.html("<b>Rack Details: </b><br/><br/>"+"<b>Rack Id: </b>"+d.name +"<br/>"+"<b>TOR Switches: </b>"+d.tor+"<br/>"+"<b>Management Switches: </b>"+d.mgmt+"<br/>"+"<b>Hosts: </b>"+d.host+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left",dx + "px")     
            .style("top", dy + "px");    
        }else if(d.type.toLowerCase()=="switch" && d.role.toLowerCase()=="spine"){
            div.html("<b>Switch Details: </b><br/><br/>"+"<b>Switch Id: </b>"+d.name +"<br/>"+ "<b>Role: </b>"+d.role+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");    
        }else if(d.type.toLowerCase()=="switch"){
            div.html("<b>Switch Details: </b><br/><br/>"+"<b>Switch Id: </b>"+d.name +"<br/>"+ "<b>Role: </b>"+d.role+"<br/>"+"<b>Rack: </b>"+d.rack+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");    
        }else if(d.type.toLowerCase()=="host"){
            div.html("<b>Host Details: </b><br/><br/>"+"<b>Host Id: </b>"+d.name +"<br/>"+"<b>Rack: </b>"+d.rack+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");
        }else if(d.type.toLowerCase()=="corporate"){
            div.html("<b>Corporate Network</b><br/><br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");
        }
    })                  
    .on("mouseout", function(d) { 
        div.transition()        
        .duration(100)      
        .style("opacity", 0);   
    });

Answer 1

所以实际上我找到了答案，我添加了x和y的坐标。然后工具提示工作，我不认为，这应该是一个永久的解决方案。如果有人有任何其他答案，请发布。谢谢

                    .style("left", (d3.event.pageX-460) + "px")
                    .style("top", (d3.event.pageY - 50) + "px");

工具提示未显示在D3.js代码中的确切位置

1 个答案: