Question

我有一个视觉，通过围绕圆心旋转放置标签。但是，这意味着圆圈左侧的所有标签都是颠倒的。在旋转完成后，是否可以在左侧旋转标签？

可视化基于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和{ {1}}作为坐标。

d.y

Answer 1

当你说＆＃34时，我不是100％肯定你的意思，它不会让我通过d.x和d.y作为坐标，＆＃34;但看起来你试图将变量 names 作为字符串而不是变量 values 传递。在下面的代码中，我更改了.attr（＆＃34; tranform＆＃34;）以传递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})

使用d3围绕圆圈旋转SVG文本

1 个答案: