score:3

Accepted answer

As Matt Walters said, you can change the text colour and add underlining with CSS, including adding hover effects.

However, I would highly recommend that you implement your links as actual <a> element hyperlinks, which are perfectly acceptable in SVG. I've tested it, and you can either wrap the text element in a link, or put the link inside the text element, but surrounding the actual text content. The only complication is that you have to use xlink:href for the url attribute, instead of simply href.

Here's a force-directed graph I created for someone else's debugging, adapted to turn all the text labels into links:
http://codepen.io/AmeliaBR/pen/AoFHg

Key code in the update function:

hypertext  = hypertext.data(force.nodes());
// hypertext refers to a selection of text elements, joined to the data

// Add labels for new nodes:
hypertext.enter().append("text") //add the text element
         //add any unchanging attributes of the <text>:
         .attr("text-anchor", "middle") 
    //add a link element within each text element
    .append("a") 
         //add unchanging attributes of the <a> link
         .attr("target", "_blank") //set the link to open in an unnamed tab
         .attr("xlink:show", "new"); 
          //show="new" is an XML way to tell the link to open in a new tab/window.
          //Either attribute *should* work on its own, but best use both to be safe.

// At this point, each new <text> element contains an <a> element, but the
// variable hypertext still refers to the text elements.

// Remove any outgoing/old text elements for non-existent nodes:
hypertext.exit().remove();

// Compute data-based attributes for entering and updating texts:
hypertext.attr("x", 8) //attributes of the <text> elements
      .attr("y", "0.3em")
  //Select the existing <a> element within each <text>
  .select("a")
      //Update the link attributes.  Note that the <a> element was never given
      //its own data, so it inherits the data from the parent <text> element.
      .attr("xlink:href", function (d) {
          return "http://example.com/" + d.name; //create url from data
      })
      //Set the text within the link, which in this case is the only text
      //within the text element.
      .text(function (d) {
          return d.name; //link text content
      });

Using the link element created all the necessary functionality, but it didn't add the default HTML link styles. For that, there's CSS:

text a {
  fill: navy;
}
text a:visited {
  fill:darkpurple;
}
text a:hover, text a:active {
  text-decoration: underline;
  fill:darkred;
}

score:1

I think you should be able to do all of this in css. Thats part of the beauty of d3.js

Without seeing some code it'll be hard to say exactly what you need, but Ill bet you could do something like this for the underlining and something similar for the other effects you have.

Can you post some code, so we can help you further?


Related Query

More Query from same tag