Modify lines/tooltip on hover

Question

I am playing around with D3.js and I am trying to do two things:

1. On hovering of the lines, I want to apply a style to the lines (color to light blue or someth

Answer 1

First, you can change the color of the lines (links) just using a simple CSS hover, like so:

.link:hover {
    stroke:blue;
}

This will turn the links blue on mouse over or hover.

---

Second, adding tooltips is slightly more complicated. One way is to have a hidden <div> on your page that becomes visible and moves to the <text> you are mousing over. It will then be hidden when you mouse out. To do so, add the following:

nodeEnter.on("mouseover", function (d) {
    var r = d3.select(this).node().getBoundingClientRect();
    d3.select("div#tooltip")
        .style("display", "inline")
        .style("top", (r.top-25) + "px")
        .style("left", r.left + "px")
        .style("position", "absolute")
        .text(d.test);
})
.on("mouseout", function(){
    d3.select("div#tooltip").style("display", "none")
});

This requires you to add the <div id="tooltip" style="display:none"></div> to your HTML page. To make the tooltip look slightly more tooltip-y, use the following CSS (I'm sure you can Google around and get an even better style):

div#tooltip{
    color:#ffffff;
    background:#000000;
    opacity:1;
    padding:5px;
}

I compiled this example in this fiddle.