d3 vertical tree - add labels to paths - d3.js

Question

I am making a d3 v4 vertical tree diagram based on http://bl.ocks.org/d3noob/8326869, and I'm trying to add text labels to the paths (eg. Yes, No, etc.). This is the code in the links section that I have so far:
function update (source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 95
});
// ****************** Nodes section ***************************
// Update the nodes...
var node = svg.selectAll('g.node')
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr("transform", function (d) {
return "translate(" + source.x0 + "," + source.y0 + ")";
})
.attr("data-info", function (d) { return d.data.info })
.on('click', click);
// Add Circle for the nodes
/*nodeEnter.append('circle')
.attr('class', 'node')
.attr("id", function(d){return "node" + d.id;})//id of the node.
.attr('r', 1e-6)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});*/
nodeEnter.append('rect')
.attr('class', 'node')
.attr('width', 170)
.attr('height', 55)
.attr('x', -85)
.attr('y', -22)
.attr('rx',7) //rounding
.attr('ry',7)
.attr("id", function(d){return "node" + d.id;});//id of the node.
nodeEnter.append('text')
//.attr("dy", ".25em")
//.attr('x', -23)
.attr('class', 'node-text')
.attr("text-anchor", "middle")
.text(function (d) {
return d.data.name;
})
.call(wrap, 165);
// UPDATE
var nodeUpdate = nodeEnter.merge(node);
// Transition to the proper position for the node
nodeUpdate.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
// Update the node attributes and style
nodeUpdate.select('rect.node')
.style("fill", function (d) {
if (d._children) {
return "#007bff"; // dark blue
}
})
.attr('cursor', 'pointer');
// Remove any exiting nodes
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.x + "," + source.y + ")";
})
.remove();
// On exit reduce the node circles size to 0
nodeExit.select('circle')
.attr('r', 1e-6);
// On exit reduce the opacity of text labels
nodeExit.select('text')
.style('fill-opacity', 1e-6);
// ****************** links section ***************************
// Update the links...
var link = svg.selectAll('path.link')
.data(links, function (d) {
return d.id;
});
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', 'g')
.attr("id", function(d){ return ("link" + d.id)})//unique id
.attr("class", "link")
.attr('d', function (d) {
var o = {x: source.x0, y: source.y0}
return diagonal(o, o);
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
var linkLabel = link.enter().insert("text","g")
.attr("class", "link2")
.attr("id", function(d){ return ("link-label" + d.id)})//unique id
.attr("dx",function(d){ return (d.parent.x + d.x)/2 })
.attr("dy",function(d){ return (d.parent.y + d.y)/2 })
.text(function(d) {
if (d.data.label === "Yes") {
this.setAttribute("x",-30);
} else {
this.setAttribute("x",10);
}
return d.data.label;
});
linkUpdate.merge(linkLabel);
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function (d) {
svg.select("#link-label" + d.id).transition().duration(duration).attr("dx",function(d){ return (d.parent.x + d.x)/2 })
.attr("dy",function(d){ return (d.parent.y + d.y)/2});
return diagonal(d, d.parent)
});
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function (d) {
var o = {x: source.x, y: source.y};
svg.selectAll("#link-label" + d.id).remove();
return diagonal(o, o)
})
.remove();
// Store the old positions for transition.
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
The "linkEnter.insert("text","g")" part is where I am having trouble. It looks like it keeps appending to the element instead of being a sibling so that it doesn't display at all, and I'm not sure how to code it so that it isn't a child of , while still being animated appropriately when a node is hidden/shown.
I'm also not sure how to set up the coordinates once I do manage to fix the above issue so that the text label is in the middle of the path (or at least close to it).
I've tried adding similar code in the node section instead but then it seems harder to find the right positioning to align to the path.
========
Edit: I've updated the code as it seems like it's working now. I created linkLabel which pulls data from the JSON variable. It's positioned to be next to the paths but not overlapping them. The animations aren't smooth but at least it seems to work.