Показать тексты на Mouseover по ссылкам

Question

Я пытаюсь показать текст на mouseover по ссылкам, но я не вижу никакого текста. Я могу изменить цвет, как в приведенном ниже коде.

Любая помощь с подсказками инструмента также приветствуется, поскольку я тоже это пробовал.

Here is the code to the jsfiddle.

Answer 1

Попробуйте этот путь.

link.on('mouseover', function(d, i) { 
    d3.select(this).style("stroke", "red"); 
    if (!d3.select("#link-label-" + i).node()) { 
     svg.append("text") 
      .attr("id", "link-label-" + i) 
      .attr("font-family", "Arial, Helvetica, sans-serif") 
      .attr("x", function() { 
       if (d.target.x > d.source.x) { 
        return (d.source.x + (d.target.x - d.source.x)/2); 
       } else { 
        return (d.target.x + (d.source.x - d.target.x)/2); 
       } 
      }) 
      .attr("y", function() { 
       if (d.target.y > d.source.y) { 
        return (d.source.y + (d.target.y - d.source.y)/2); 
       } else { 
        return (d.target.y + (d.source.y - d.target.y)/2); 
       } 
      }) 
      .attr("fill", "Black") 
      .style("font", "normal 12px Arial") 
      .attr("dy", ".35em") 
      .text(function() { 
       return d.source.name + " - " + d.target.name; 
      }); 
    } 
}).on('mouseout', function(d, i) { 
    d3.select(this).style("stroke", d.target.group == 2?"black":"#9ecae1"); 
    d3.select("#link-label-" + i).remove(); 
}); 

Обновлено fiddle

Answer 2

Поскольку ваши circle s уже привязаны к данным вы можете сделать что-то вроде этого

d3.select('circle') 
    .attr('title', function(d){ 
     return d.name; //or whatever 
    }); 

частное использование браузера по умолчанию подсказке в