d3 всплывающая подсказка подсказка

Question

Я покажу и спрячу tooltip при зависании circle. У меня есть данные в tooltip, которые могут иметь ссылку, которую пользователь, возможно, захочет щелкнуть. Проблема в том, что я привязал функцию hover к узлу, когда я пытаюсь нажать на tooltip, связать ссылку tooltip скрыть. Я пытаюсь добавить tooltip внутри g зависающего элемента, но это не сработало. Любое предложение fiddle

nodeEnter.append("circle") 
     .attr("r", 10) 
     .style("fill", function(d){ 
      return d._children ? "lightsteelblue" : "white"; 
     }).on('mouseover',function(){ 
      div.style('left',d3.event.pageX+20+'px').style('top',d3.event.pageY+'px').style('visibility','visible')   
     }).on('mouseout',function(){ 
     div.style('visibility','hidden') 
     }) 

Answer 1

Try SetTimeout в MouseOut случае.

fiddle

on('mouseout',function(){ 
    setTimeout(function(){div.style('visibility','hidden');}, 2000) 
}) 

Answer 2

Попробуйте Demo, скрывая подсказку в определенное время

var json = 
{ 
    "name": "Base", 
    "children": [ 
     { 
      "name": "Type A" 

     }, 
     { 
      "name": "Type B" 

     } 
    ] 
}; 

var setTime; 
var delayTime = 1000; 
var width = 700; 
var height = 650; 
var maxLabel = 150; 
var duration = 500; 
var radius = 5; 

var i = 0; 
var root; 

var tree = d3.layout.tree() 
    .size([height, width]); 

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.x, d.y]; }); 

var svg = d3.select("#tree").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(" + 0 + ",50)"); 

root = json; 
root.x0 = height/2; 
root.y0 = 0; 

root.children.forEach(collapse); 
var div= d3.select('body').append('div').attr('class','tooltip').style('visibility','hidden').html('<div class="content"><a href="http:www.google.com">google</a></div>') 


function update(source) 
{ 
    // Compute the new tree layout. 
    var nodes = tree.nodes(root).reverse(); 
    var links = tree.links(nodes); 

    // Normalize for fixed-depth. 
    nodes.forEach(function(d) { d.y = d.depth * maxLabel; }); 

    // Update the nodes… 
    var node = svg.selectAll("g.node") 
     .data(nodes, function(d){ 
      return d.id || (d.id = ++i); 
     }); 

    // Enter any new nodes at the parent's previous position. 
    var nodeEnter = node.enter() 
     .append("g") 
     .attr("class", "node") 
     .attr("transform", function(d){ return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
     .on("click", click); 


    nodeEnter.append("circle") 
     .attr("r", 10) 
     .style("fill", function(d){ 
      return d._children ? "lightsteelblue" : "white"; 
     }).on('mouseover',function(){    
       div.style('left',d3.event.pageX+20+'px').style('top',d3.event.pageY+'px').style('visibility','visible')      
     }).on('mouseout',function(){ 
     setTime = setTimeout(function() { 
      div.style('visibility','hidden') 
     }, delayTime); 
     }) 


    nodeEnter.append("text") 
     .attr("x", function(d){ 
      var spacing = computeRadius(d) + 5; 
      return d.children || d._children ? -spacing : spacing; 
     }) 
     .attr("dy", "3") 
     .attr("text-anchor", function(d){ return d.children || d._children ? "end" : "start"; }) 
     .text(function(d){ return d.name; }) 
     .style("fill-opacity", 0); 

    // Transition nodes to their new position. 
    var nodeUpdate = node.transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    nodeUpdate.select("circle") 
     .attr("r", 20) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

    nodeUpdate.select("text").style("fill-opacity", 1); 

    // Transition exiting nodes to the parent's new position. 
    var nodeExit = node.exit().transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
     .remove(); 

    nodeExit.select("circle").attr("r", 20); 
    nodeExit.select("text").style("fill-opacity", 0); 

    // Update the links… 
    var link = svg.selectAll("path.link") 
     .data(links, function(d){ return d.target.id; }); 

    // Enter any new links at the parent's previous position. 
    link.enter().insert("path", "g") 
     .attr("class", "link") 
     .attr("d", function(d){ 
      var o = {x: source.x0, y: source.y0}; 
      return diagonal({source: o, target: o}); 
     }); 

    // Transition links to their new position. 
    link.transition() 
     .duration(duration) 
     .attr("d", diagonal); 

    // Transition exiting nodes to the parent's new position. 
    link.exit().transition() 
     .duration(duration) 
     .attr("d", function(d){ 
      var o = {x: source.x, y: source.y}; 
      return diagonal({source: o, target: o}); 
     }) 
     .remove(); 

    // Stash the old positions for transition. 
    nodes.forEach(function(d){ 
     d.x0 = d.x; 
     d.y0 = d.y; 
    }); 
} 



function computeRadius(d) 
{ 
    if(d.children || d._children) return radius + (radius * nbEndNodes(d)/10); 
    else return radius; 
} 

function nbEndNodes(n) 
{ 
    nb = 0;  
    if(n.children){ 
     n.children.forEach(function(c){ 
      nb += nbEndNodes(c); 
     }); 
    } 
    else if(n._children){ 
     n._children.forEach(function(c){ 
      nb += nbEndNodes(c); 
     }); 
    } 
    else nb++; 

    return nb; 
} 

function click(d) 
{ 
    if (d.children){ 
     d._children = d.children; 
     d.children = null; 
    } 
    else{ 
     d.children = d._children; 
     d._children = null; 
    } 
    update(d); 
} 

function collapse(d){ 
    if (d.children){ 
     d._children = d.children; 
     d._children.forEach(collapse); 
     d.children = null; 
    } 
} 
function expand(d){ 
    var children = (d.children)?d.children:d._children; 
    if (d._children) {   
     d.children = d._children; 
     d._children = null;  
    } 
    if(children) 
     children.forEach(expand); 
} 


expand(root); 


update(root);