Воспроизведите ярлыки Protovis Sunburst с помощью D3.js

Question

Я перевожу старый сайт Rails/Protovis на Django и D3.js. Я использовал модифицированную версию солнечных лучей Protovis ( http://mbostock.github.com/protovis/ex/sunburst.html - мой код см. http://www.eafsd.org/assignments_sunbursts) и хотел бы воссоздать это в D3.js с использованием примера солнечных лучей ( http://bl.ocks.org/4063423) в качестве базовой линии, но я наткнулся на стену с прикреплением меток к дугам.

Я рассмотрел несколько других вопросов SO, включая выравнивание текста внутри дуги окружности d3js и поиск способа отображения меток на диаграмме солнечных лучей (не смог найти работающий пример), но мне кажется, что 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);
      });
    });

Отображаются солнечные лучи и заголовок отображается при наведении курсора мыши (хотя внутреннее кольцо не имеет функции размера, поэтому оно возвращается как неопределенное).

Две другие модификации, которые я пытаюсь сделать: я не могу найти фрагмент D3js, который показывает, как рекурсивно вычислить размеры пакетов, чтобы внутренние узлы могли показать общий размер их ассоциированных листьев.

Наконец, я не могу понять, как добавить собственную цветовую гамму.

Я действительно ценю ваше время. Большое спасибо.