How do I add a title attribute to the nodes of my force-directed graph generated by d3?

Question

Following a d3 demonstration (http://goo.gl/lN7Jo), I am trying to create a force-directed graph. I am trying to add a title attribute to my node elements created by doing this.

var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")

      // here is how I try to add a title.
      .attr("title", "my title")

      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

However, the nodes of my graph are not displaying a title attribute. What is the proper way to do so? Thank you.

Answer 1

In SVG title attributes are really elements that describe their parent, so you would have to follow the example you linked...

var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

node.append("title")
    .text("my text");

Answer 2

Add this code right below where you initialise your node. This will add some hard-code text as title to each node.

node.append("title")
    .text("my text");

If you want to add name as title, do this;

node.append("title")
    .text(function (d) {
            return d.name;
        })