title: Adding text on a path in D3 force layout
body: <p>I am creating a navigation flow diagram using D3.js. Basically, it looks alright so far, however, when I change things to include a title/tooltip on link between nodes (to reflect how many people clicked from one page to another), I am unable to do it - </p>
  
  <pre><code>var data =  [{"value":"1","target":"SearchActivity","source":"CommonFriendActivity"},{"value":"1","target":"SearchActivity","source":"InviteActivity"},{"value":"1","target":"SearchActivity","source":"LikeDetailActivity"},{"value":"1","target":"Exit","source":"LoginScreenActivity"},{"value":"1","target":"InviteActivity","source":"LoginScreenActivity"},{"value":"1.5","target":"SearchActivity","source":"LoginScreenActivity"},{"value":"1","target":"Exit","source":"SearchActivity"},{"value":"1","target":"InviteActivity","source":"SearchActivity"},{"value":"1","target":"PictureActivity","source":"SearchActivity"},{"value":"1","target":"UserDetailActivity","source":"SearchActivity"},{"value":"1","target":"CommonFriendActivity","source":"UserDetailActivity"},{"value":"1","target":"Exit","source":"UserDetailActivity"},{"value":"1","target":"LikeDetailActivity","source":"UserDetailActivity"},{"value":"1","target":"SearchActivity","source":"UserDetailActivity"}];
  
  var nodes = {};
  
  // Compute the distinct nodes from the links.
  data.forEach(function(link) {
    link.source = nodes[link.source] ||
      (nodes[link.source] = {name: link.source, tooltip: link.value});
    link.target = nodes[link.target] ||
      (nodes[link.target] = {name: link.target, tooltip: link.value});
    link.value = +link.value;
  });
  
  var width = 600,
  height = 500;
  
  var force = d3.layout.force()
  .nodes(d3.values(nodes))
  .links(data)
  .size([width, height])
  .linkDistance(200)
  .charge(-300)
  .on("tick", tick)
  .start();
  
  // Set the range
  var  v = d3.scale.linear().range([0, 100]);
  
  // Scale the range of the data
  v.domain([0, d3.max(data, function(d) { return d.value; })]);
  
  // asign a type per value to encode opacity
  data.forEach(function(link) {
    if (v(link.value) &lt;= 25) {
      link.type = "twofive";
    } else if (v(link.value) &lt;= 50 &amp;&amp; v(link.value) &gt; 25) {
      link.type = "fivezero";
    } else if (v(link.value) &lt;= 75 &amp;&amp; v(link.value) &gt; 50) {
      link.type = "sevenfive";
    } else if (v(link.value) &lt;= 100 &amp;&amp; v(link.value) &gt; 75) {
      link.type = "onezerozero";
    }
  });
  
  var svg = d3.select("#phone_layout").append("svg")
  .attr("width", width)
  .attr("height", height);
  
  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
  .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
  .attr("id", String)
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 15)
  .attr("refY", -1.5)
  .attr("markerWidth", 6)
  .attr("markerHeight", 6)
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");
  
  // add the links and the arrows
  var path = svg.append("svg:g").selectAll("path")
  .data(force.links())
  .enter().append("svg:path")
  .attr("class", function(d) { return "link " + d.type; })
  .attr("marker-end", "url(#end)");
  
  // define the nodes
  var node = svg.selectAll(".node")
  .data(force.nodes())
  .enter().append("g")
  .attr("class", "node")
  .on("click", click)
  .on("dblclick", dblclick)
  .call(force.drag);
  
  // add the nodes
  node.append("circle")
  .attr("r", 10)
  .style("fill", "steelblue")
  .style("stroke", "lightsteelblue")
  .style("stroke-width", ".5px")
  .style("font", "20px sans-serif");
  
  // add the text
  node.append("text")
  .attr("x", 15)
  .attr("dy", ".9em")
  .text(function(d) { return d.name; });
  
  // add the curvy lines
  function tick() {
    path.attr("d", function(d) {
      var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
      return "M" +
        d.source.x + "," +
        d.source.y + "A" +
        dr + "," + dr + " 0 0,1 " +
        d.target.x + "," +
        d.target.y;
    });
  
    node
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")"; });
  }
  </code></pre>
  
  <p>Here is the jsfiddle - <a href="http://jsfiddle.net/uMceL/7/" rel="nofollow">http://jsfiddle.net/uMceL/7/</a>
  PS: Links are also not looking properly but they seem fine on webpage when I use same code.</p>
  
  <p>Any help/pointer will be greatly appreciated</p>