Unable to add text on link in d3 collapsible tree - d3.js

Question

in the above code my .append("text") dosent work.I do not get any text inserted on my links.
i tried using link.append("path")..using this i can see the text but not the links. I want to use
link.insert("path") and still be able to add text and be able to collapse and expand nodes along with the link
text. Pls help
var link = svg.selectAll("path.link")
.data(links, function (d) { return d.target.id; });
// Enter any new links at the parent's previous position.
// var link1=link.enter();
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = { x: source.x0, y: source.y0 };
return diagonal({ source: o, target: o });
});
link.enter()
.append("g")
.attr("class", "link")
.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
return "translate(" +
((d.source.y + d.target.y)/2) + "," +
((d.source.x + d.target.x)/2) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
console.log(d.target.name);
return d.target.name;
});

Answer 1

This was difficult to answer without a fiddle or a link to working code, but I think this is maybe what you were after: http://jsfiddle.net/henbox/82pepd2a/9/
You should see red text on the links that corresponds to the node text (in black) and these should transition as nodes \ links move.
I created a new variable var linktext to handle the text separate from the links (path elements) themselves, since this was what was causing you paths not to show.
I also used insert("g") instead of append("g") to add a completely new g element, rather than placing the g and text inside each path. Here's the important stuff:
// Update the link text
var linktext = svg.selectAll("g.link")
.data(links, function (d) {
return d.target.id;
});
linktext.enter()
.insert("g")
.attr("class", "link")
.append("text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d) {
//console.log(d.target.name);
return d.target.name;
});
Finally I added 'update' and 'remove' blocks for linktext using a similar approach used for links. Note that I also moved the styling to CSS for tidyness