如何在D3.js中为textomable旭日图添加textPath标签？

Question

我修改了this sunburst diagram in D3，并希望添加文字标签和其他一些效果。我试图采用我能找到的每一个例子，但没有运气。看起来我还没有D3 :(

对于标签，我想只使用顶部/父节点的名称，并且它们出现在图表之外（如下图所示）。这不太有效：

var label = svg.datum(root)
    .selectAll("text")
    .data(partition.nodes(root).slice(0,3)) // just top/parent nodes?
    .enter().append("text")
    .attr("class", "label")
    .attr("x", 0) // middle of arc
    .attr("dy", -10) // outside last children arcs
    /*
    .attr("transform", function(d) {
        var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90;
        console.log(d, angle);
        if (Math.floor(angle) == 119) {
            console.log("Flip", d)
            return ""
        } else {
            //return "scale(-1 -1)"
        }
    })
    */
    .append("textPath")
    .attr("xlink:href", function(d, i) { return "#path_" + i; })
    .text(function(d) { return d.name + " X%"; });

我还想在悬停时修改整个树枝，以便它向外“移动”。我将如何实现这一目标？

function mouseover(d) {
    d3.select(this) // current element and all its children
        .transition()
        .duration(250)
        .style("fill", function(d) { return color((d.children ? d : d.parent).name); });
        // shift arcs outwards
}
function mouseout(d) {
    d3.selectAll("path")
        .transition()
        .duration(250)
        .style("fill", "#fff");
        // bring arcs back
}

接下来，我想在图的外部添加额外的行/刻度，这些行/刻度对应于顶部/父节点的边界，突出显示它们。这些方面的东西：

var ticks = svg.datum(root).selectAll("line")
    .data(partition.nodes)  // just top/parent nodes?
    .enter().append("svg:line")
    .style("fill", "none")
    .style("stroke", "#f00");

ticks
    .transition()
    .ease("elastic")
    .duration(750)
    .attr("x1", function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .attr("y1", function(d) { return Math.max(0, y(d.y + d.dy)); })
    .attr("x2", function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .attr("y2", function(d) { return Math.max(0, y(d.y + d.dy) + radius/10); });

最后，我想限制缩放级别，以便树中的最后一个节点不会触发缩放，而是启动一个URL（将在JSON文件中添加）。我该如何修改以下内容？

function click(d) {
    node = d;
    path.transition()
        .duration(750)
        .attrTween("d", arcTweenZoom(d));
}

My full pen here. 对此有任何帮助将非常感激。