Javascript 使用D3.js复制Protovis Sunburst标签

我正在将一个旧的Rails/Protovis站点迁移到Django和D3.js。我使用了Protovis sunburst的一个修改版本-我的代码请参见，我想在D3.js中使用sunburst示例作为基线重新创建这个版本，但我遇到了一堵墙，墙上贴着标签

我已经研究了其他几个SO问题，包括和，但我似乎无法让textpath正常工作。如果可能的话，让标签呈放射状显示会很好，因为我展示的18世纪外交标题的文本可能会很长

我尝试了示例中的以下代码：

  d3.json("../assignment-by-type.json", function(error, root) {
      var path = svg.datum(root)
          .selectAll("path")
          .data(partition.nodes)
         .enter()
          .append("path")
          .attr("display", function(d) {
              return d.depth ? null : "none";
          }) // hide inner ring
          .attr("d", arc)
          .style("stroke", "#fff")
          .style("fill", function(d) {
              return color((d.children ? d : d.parent).name);
          })
          .style("fill-rule", "evenodd")
          .each(stash);

      /* my additions begin here */

      path.append("title")
          .text(function(d) {return d.name + ": " + d.size});

      path.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .append("textpath")
          .attr("class", "textpath")
          .attr("xlink:href", "#path")
          .text(function(d) { return d.name });

      /* end of what I've added, back to the example code*/

      d3.selectAll("input").on("change", function change() {
          var value = this.value === "count"
                ? function() { return 1; }
                : function(d) { return d.size; };

          path.data(partition.value(value).nodes)
              .transition()
              .duration(1500)
              .attrTween("d", arcTween);
      });
    });

尽管内圈没有大小函数，因此返回为未定义，但sunburst会显示，并且标题会显示在鼠标上方

我试图做的另外两个修改是：我找不到一个D3js代码段来显示如何递归计算包大小，以便内部节点可以显示其关联叶的总大小

最后，我不知道如何添加自己的颜色范围

我真的很感谢你抽出时间。非常感谢