0

I am trying to show text on mouseover on links, but I am not able to see any text. I only can change the colour like in the code attached below.

Any help with the tool tips is also welcome as I tried that too.

Here is the code to the jsfiddle.

colidyre
  • 4,170
  • 12
  • 37
  • 53
Priya Ahuja
  • 37
  • 8

2 Answers2

1

Try this way.

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();
});

Updated fiddle

Gilsha
  • 14,431
  • 3
  • 32
  • 47
  • Thanku so much..It works fine.but if i pass d in text function it gives me an error saying target undefined. – Priya Ahuja Oct 07 '15 at 10:44
  • .text(function(d) { var value = d.target.data.split(" "); var result = parseInt(value[0]); //I want to show this result on mouseover – Priya Ahuja Oct 07 '15 at 10:44
  • It Worked..I got the error i should not have passed d twice when we are already passing in mouseover function...:) – Priya Ahuja Oct 07 '15 at 10:48
0

Since your circles are already bound to data you can do something like this 

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

an use the default browser tooltip