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");