Reproduce Protovis Sunburst Labels with D3.js-Collection of common programming errors

I’m migrating an older Rails/Protovis site to Django and D3.js. I used a modified version of the Protovis sunburst (http://mbostock.github.com/protovis/ex/sunburst.html — for my code see http://www.eafsd.org/assignments_sunbursts) and would like to recreate this in D3.js using the sunburst example (http://bl.ocks.org/4063423) as a baseline, but I have run into a wall with attaching labels to the arcs.

I have looked at several other SO questions including Aligning text inside circular arc d3js and Looking for a way to display labels on sunburst chart (could not find a working example), but I can’t seem to get the textpath working. If possible, it would be great to have the labels display radially as the text I’m displaying (18th Century diplomatic titles) can get quite long.

I have tried the following code from the example:

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

The sunburst displays and the title show up on mouseover (although the inner ring doesn’t have a size function so it returns as undefined).

Two other modifications I am trying to make: I can’t find a D3js snippet that shows how to recursively compute the package sizes so that the inner nodes can show the total size of their associate leaves.

Finally, I can’t figure out how to add my own color range.

I really appreciate your time. Many thanks.