旋转SVG文本围绕一个圆圈，然后围绕自己使用d3

Rotate SVG text around a circle then around itself using d3

本文关键字：然后 自己 d3 文本 SVG 旋转 一个      更新时间：2023-09-26

我有一个可视化的标签放置的位置，通过围绕圆圈的中心旋转。然而，这意味着圆圈左侧的所有标签都是上下颠倒的。是否有可能旋转左手边的标签周围，在这个旋转发生后?

可视化是基于来自d3js.org的zoomable日冕

相关代码为:

function computeTextRotation(d) {
    var angle=(d.x +d.dx/2)*180/Math.PI - 90;
    return angle;
}
var texts = svg.selectAll("text")
        .data(partitioned_data)
        .enter().append("text")
        .filter(filter_min_arc_size_text)       
        .attr("transform", function(d) {return "rotate(" + computeTextRotation(d) + ")"})
        .attr("x", function(d) { return radius / 3 * d.depth; })    
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align  
        .text(function(d,i) {return d.name})

我尝试了下面的代码，因为我知道这是可能的，如果你知道文本的x和y坐标，但它不会让我通过d.x和d.y作为坐标。

var texts = svg.selectAll("text")
        .data(partitioned_data)
        .enter().append("text")
        .filter(filter_min_arc_size_text)       
        .attr("transform", function(d) {
            if (computeTextRotation(d)>90&&computeTextRotation(d)<270) {
                return "rotate(" + computeTextRotation(d) + ") rotate(d.x,d.y,180)";
            } else {
                return "rotate(" + computeTextRotation(d) + ")";
            }})
        .attr("x", function(d) { return radius / 3 * d.depth; })    
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align  
        .text(function(d,i) {return d.name})

我不是100%确定你的意思，当你说"它不会让我传递d.x和d.y作为坐标"，但它看起来像你试图传递变量名称作为字符串，而不是变量值。在下面的代码中，我改变了你的。attr("transform")来传递d.x和d.y的值。

var texts = svg.selectAll("text")
    .data(partitioned_data)
    .enter()
    .append("text")
    .filter(filter_min_arc_size_text)       
    .attr("transform", function(d) {
        if (computeTextRotation(d)>90&&computeTextRotation(d)<270) {
            return "rotate(" + computeTextRotation(d) + 
                   ") rotate(" + d.x + "," + d.y + ",180)";
        } else {
            return "rotate(" + computeTextRotation(d) + ")";
        }
    })
    .attr("x", function(d) { return radius / 3 * d.depth; })    
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align  
    .text(function(d,i) {return d.name})
相关文章：