Add text to D3 Bilevel Partition - backbone.js

Question

I'm using mbostock’s Bilevel Partition and I need to include each node's text on each path. I'm trying to use this Coffee Wheel example but I'm having no luck.
This is all being written with Backbone.js which is giving me some trouble with nesting "this", so that may cause a problem.
Here is my render function. I try adding in text at the bottom.
render: function(root, svgVar) {
var that = this;
$('.breadcrumb').append('<li>'+root.name+'</li>');
var svg = d3.select(".associations-container").append("svg")
.attr("width", svgVar.width)
.attr("height", svgVar.height)
.append("g")
.attr("transform", "translate(" + (svgVar.width/2) + "," + ((svgVar.height/2)-svgVar.padding) + ")");
this.partition = d3.layout.partition()
.sort(function(a, b) { return d3.ascending(a.name, b.name); })
.size([2 * Math.PI, svgVar.radius]);
this.arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx - .01 / (d.depth + .5); })
.innerRadius(function(d) { return svgVar.radius / 3 * d.depth; })
.outerRadius(function(d) { return svgVar.radius / 3 * (d.depth + 1) - 1; });
// Compute the initial layout on the entire tree to sum sizes.
// Also compute the full name and fill color for each node,
// and stash the children so they can be restored as we descend.
this.partition
.value(function(d) { return 1; })
.nodes(root)
.forEach(function(d) {
d._children = d.children;
d.sum = d.value;
d.key = that.key(d);
d.fill = that.fill(d);
});
// Now redefine the value function to use the previously-computed sum.
this.partition
.children(function(d, depth) { return depth < 2 ? d._children : null; })
.value(function(d) { return d.sum; });
this.centerCircle = svg.append("circle")
.attr("r", svgVar.radius / 3)
.attr("fill", "grey")
.on("click", this.zoomOut);
var centerControls = svg.append("g");
centerControls.append("svg:foreignObject")
.attr("width", 40)
.attr("height", 40)
.attr("y", "-20px")
.attr("x", "-48px")
.append("xhtml:span")
.attr("class", "control glyphicon glyphicon-filter");
centerControls.append("svg:foreignObject")
.attr("width", 40)
.attr("height", 50)
.attr("y", "-20px")
.attr("x", "8px")
.append("xhtml:span")
.attr("class", "control glyphicon glyphicon-th-list toggle-list");
this.path = svg.selectAll("path")
.data(this.partition.nodes(root).slice(1))
.enter().append("path")
.attr("d", this.arc)
.style("fill", function(d) { return d.fill; })
.each(function(d) { this._current = that.updateArc(d); })
.on("click", this.zoomIn);
this.text = svg.selectAll("text").data(root);
this.textEnter = this.text.enter().append("text")
.style("fill-opacity", 1)
.style("fill", "white")
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) >Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
});
this.textEnter.append("tspan")
.attr("x", 0)
.text(function(d) { return d.name; });