LINKS IN Collapsible Tree In D3.js

I am new to D3 so I want to figure out some of the following things in this tree layout example(http://bl.ocks.org/mbostock/4339083) . How can I add Names to Links(edges) that is

Solution 1:

For labels, you need to append text elements to the link paths:

link.enter().insert("text", "g")
  .attr("x", function(d) { return (d.source.x+d.target.x)/2; })
  .attr("y", function(d) { return (d.source.y+d.target.y)/2; })
  .text(function(d) { return d.target.name; });

You may want to adjust the label positions.

To change the width of the link, you need to set the stroke-width attribute of the path:

link.enter().insert("path", "g")
  .attr("class", "link")
  .attr("stroke-width", function(d) { return d.target.size; })
  .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
  });