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

【问题标题】：Rotate SVG text around a circle then around itself using d3围绕一个圆圈旋转 SVG 文本，然后使用 d3 围绕自身旋转
【发布时间】：2016-09-22 13:48:33
【问题描述】：

我通过围绕圆心旋转来放置标签的视觉效果。然而，这意味着圆圈左侧的所有标签都是颠倒的。发生这种旋转后，是否可以围绕自身旋转左侧的标签？

可视化基于来自d3js.org 的zoomable sunburst

相关代码为：

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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

当您说“它不会让我将 d.x 和 d.y 作为坐标传递”时，我不是 100% 确定您的意思，但看起来您正试图将变量 names 传递为字符串而不是变量 values。在下面的代码中，我更改了您的 .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})

【讨论】：