Backbone.js 向D3双层分区添加文本

我正在使用mbostock，我需要在每个路径上包含每个节点的文本。我试图用这个例子，但我没有运气

所有这些都是用Backbone.js编写的，这给了我一些嵌套的麻烦，因此可能会导致问题

这是我的渲染函数。我尝试在底部添加文本

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

---

可能会有帮助。@LarsKotthoff，如果你看这个。路径我已经在那里了。root是一个对象，你需要数据数组；具体来说，就是创建路径时由this.partition.nodesroot.slice1创建的相同节点数组。将该数组保存到该数组的一个变量/属性，并在文本元素的数据联接中重新使用它。谢谢@AmeliaBR，这解决了我的问题！