Javascript 如何在D3.js中向可缩放的sunburst图添加textPath标签?

Javascript 如何在D3.js中向可缩放的sunburst图添加textPath标签?,javascript,d3.js,sunburst-diagram,Javascript,D3.js,Sunburst Diagram,我已经修改并想添加文本标签和一些其他效果。我试着采纳我能找到的每一个例子,但运气不佳。看起来我对D3还不太了解:( 对于标签,我只想使用顶部/父节点的名称,并且它们出现在图表之外(如下图所示)。这不太有效: var label = svg.datum(root) .selectAll("text") .data(partition.nodes(root).slice(0,3)) // just top/parent nodes? .enter().append("text

我已经修改并想添加文本标签和一些其他效果。我试着采纳我能找到的每一个例子,但运气不佳。看起来我对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));
}

在此方面的任何帮助都将不胜感激