javascript - d3 饼 : redraw label on path change

Question

我正在使用 d3 绘制一个饼图，并使用单选按钮更改显示的路径。我的问题是根据新路径重新计算标签位置。加载时，标签绘制正确，但单击时，位置仍与首次加载时相同。 我认为问题在于 g 仅采用第一个数据值，而我不知道如何说采用当前数据值。

绘制标签的函数是

//Labels
    d3.selectAll("g").select("text").transition()
        .ease("linear")
        .duration(500)
        .style("opacity", 0).remove();
    svg.selectAll("g").append("text")
        .attr("transform", function (d) {
            var c = arc.centroid(d),
                x = c[0],
                y = c[1],
                // pythagorean theorem for hypotenuse
                h = Math.sqrt(x * x + y * y);
            return "translate(" + (x / h * labelr) + ',' +
                (y / h * labelr) + ")";
        })
        .attr("dy", ".35em")
        .style("opacity", 0)
        .style("fill", "#000")
        .style("font-size", 12)
        .attr("text-anchor", function (d) {
            // are we past the center?
            return (d.endAngle + d.startAngle) / 2 > Math.PI ?
                "end" : "start";
        })
        .text(function (d) { return d.data.label; })
        .transition()
        .ease("linear")
        .delay(1000)
        .duration(500)
        .style("opacity", 1);

有关更多信息，请参阅 https://jsfiddle.net/w0ckw4tb/

谢谢

Answer 1

只需在附加新文本节点之前应用新的数据绑定(bind)即可:

svg.selectAll("g").data(pie) // <== !!!
    .append("text")
    .attr("transform" ...

如果您没有这样做，则此代码:

.attr("transform", function (d) {
    var c = arc.centroid(d),
        x = c[0],
        y = c[1],
        // pythagorean theorem for hypotenuse
        h = Math.sqrt(x * x + y * y);
    return "translate(" + (x / h * labelr) + ',' +
        (y / h * labelr) + ")";
})

为 transform 属性返回相同的值，因此标签保持在同一位置。

检查working fiddle .