将文本添加到D3双层分区

Question

我正在使用mbostock的Bilevel Partition，我需要在每条路径上包含每个节点的文本。我正在尝试使用这个Coffee Wheel示例，但我没有运气。

这一切都是用Backbone.js编写的，这给我带来了一些嵌套“this”的麻烦，所以这可能会导致问题。

这是我的渲染功能。我尝试在底部添加文字。

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; });