LinkText is not working in tree layout d3js - d3.js

Question

I am trying to put linkText for the link in tree layout d3js but it is not wlrking, created the jsfiddle project here. Can anybody let me know, why the linkText is not coming.
var link = svg.selectAll(".link")
.data(links, function (d) {
return d.target.id;
});
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.transition().duration(duration)
.style("stroke", function (d) {
return "#99FFCC";
})
.attr("d", diagonal);
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.target.y - 50) + "," +
(d.target.x - 10) + ")";
}).attr("text-anchor", "middle").text(function (d) {
alert(d.target.label);
return d.target.label;
});

Answer 1

Your mistake is in here:
link.enter().insert("path", "g")
.attr("class", "link")
...
...
link.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
This code will put the text within the path DOM, which is incorrect.
Text DOM should never be within the path DOM.
Correct code should have been this:
// Update the links…
var link = svg.selectAll("path.link")
.data(links);
//adding the text to the svg
link.enter().insert("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function (d) {
return "translate(" + (d.target.y - 30) + "," + (d.target.x - 10) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
console.log(d.target.label);
return d.target.label;
});
Full working code here.