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
                })

要查找圆弧的中心，请计算圆弧let angle = ((d.startAngle + d.endAngle)/2);

的角平分线

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

一旦我们得到斜边和角度，那么可以用毕达哥拉斯定理计算x和y位置。

将文本锚点中间设置为在弧的中心对齐。

当图表向上（即-ve y scale）

时，使用

-y而不是y

使用d3

1 个答案: