javascript - 使用 d3 将圆弧内的文本居中

Question

这是我的用例:我正在使用 d3 创建太阳爆发。在每个节点内，我想将文本居中。它似乎不起作用。我试过使用这里提到的方法: d3js - how to add the text each of the arc's centre, after animation end?但这似乎不起作用: https://codepen.io/yonatankra/pen/awEYgR?editors=0010

更具体地说:

    var text = svg.selectAll(".node").append("text")
.attr("text-anchor","middle")
 .attr("x", function(d) {
    const middleRadius = d.y1 - d.y0;
    arc = d3.arc().innerRadius( middleRadius - 1 ).outerRadius( middleRadius + 1 );
    const x =  arc.centroid(d);

    return x[0]*Math.cos(x[1]);
})
.attr("y", function(d) {
    const middleRadius = d.y1 - d.y0;
    arc = d3.arc().innerRadius( middleRadius - 1 ).outerRadius( middleRadius + 1 );
    const x =  arc.centroid(d);

    return middleRadius*Math.sin(x[1]);
}) 
/* .attr("dy", "-28") */
                    // .attr("dx", "6") // margin
                    // .attr("dy", ".35em") // vertical-align
                        .text(function(d) { 
                        return d.data.name
                })

我一直在尝试各种方式，并准备了多个指南来说明如何做到这一点，但没有任何效果像预期的那样。

您将如何更改代码以在圆弧中心输入文本？还有另一个理论问题 - 为什么 arc.centroid 会为不同的弧返回相同的值？

Answer 1

var text = svg.selectAll(".node").append("text").attr("transform", function(d){
                let angle = ((d.startAngle + d.endAngle)/2);
                let hyp = (d.depth * 50) + 25;
                let x = Math.sin(angle) * hyp;
                let y = Math.cos(angle) * hyp;
                .attr("text-anchor", "middle")
                .text(function(d) { 
                        return d.data.name
                })

要找到圆弧的中心，计算圆弧的 Angular 平分线let angle = ((d.​​startAngle + d.endAngle)/2);

斜边将是 current depth * 50 50 是 (outer radius - inner radius)/2

一旦我们有了斜边和 Angular ，就可以用毕达哥拉斯定理计算 x 和 y 的位置。

设置文本 anchor 居中对齐到圆弧的中心。

-y 被用来代替 y，因为图形是向上的(这是 -ve y 比例)